How to trigger an animation on click — After Effects & Lottie in Webflow

How to trigger an animation on click — After Effects & Lottie in Webflow


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.

Comments

  1. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *