Set up an animation to load with a mouse click or tap.
On click, we want this to happen. How do we do it? Three things: we’re going to add the Lottie animation, we’ll set up the trigger, then we’ll set up the animation.
Okay, for the first part. We have a blank page here. All we’ve done is set the background color to black. In our Assets panel, we’ve already uploaded the Lottie animation we exported from After Effects. Let’s drag it in, right into our page body, and let’s center it. With the body elements selected, we can use science and technology to align and justify our animation to the center. If we preview our page, we can see the animation plays immediately on load, but that’s not quite right. That’s part one.
Part two, let’s set up the interaction so instead of animating when the page loads, the animation plays on click. Over in Interactions, this is where it says interactions, we can add our trigger. We’re going to make sure the animation itself is selected, not the body or anything else. Because we want that element, the Lottie animation element, to serve as the trigger. What kind of trigger? An element trigger, something that triggers our animation on mouse click or tap. This is where we set up the animation.
On first click, we’ll want to select our Lottie option from the dropdown. This means on click, the Lottie animation will play. Too good to believe? Let’s test in preview. And when we load the page, it’s at the start of the animation, when we click it, that’s it.
So, we brought in the animation, set the element trigger on click, and made sure the Lottie animation played properly. And then we summarized everything and Grimur finished the edit just in time.
As part of our course on After Effects and Lottie in Webflow, we created an animation of a circle that explodes into many smaller circles. In this tutorial, we’ll set up our animation to load with a mouse click or tap.
We’ll do this in 3 steps:
To follow along, go ahead and clone this project.
Got it? Great! Let’s get started.
You’ll need to export your Lottie animation from After Effects and upload it to your Webflow project. Learn how to do this in steps 3 and 4 of our Full walkthrough tutorial.
Start with a blank page in the Webflow Designer and set the background color to black at the bottom of the Style panel on the right.
To find and add the exploding Lottie animation, click the photo icon (Assets panel) from the left toolbar and drag the circle animation onto the Canvas.
To center the circle, make sure the body element is selected in the Assets panel on the left. From the Style panel on the right under Layout, set Align and Justify to center.
When you preview the page (click the eye in the top left), the animation plays immediately on load. This isn’t quite what we want to happen, so we’ll adjust this in step 2.
In this step, we’ll set the animation to load on click instead of automatically playing when the page loads.
Before we add our trigger, we want to make sure the animation is selected, not another element, like the body.
From the Interactions panel on the right toolbar, open the Element trigger menu and choose Mouse click (tap).
On the Interactions panel under On 1st click, select Lottie Playback from the Action menu.
And voilà — you did it! Your Lottie animation will now play on click. Go ahead and try it out in preview. When the page loads, the animation will be static until it’s triggered by a mouse click or tap.
Nice work!
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback