Animate an element while scrolling

As part of our series on After Effects and Lottie in Webflow, we created a Lottie animation in After Effects. In this tutorial, we’ll set up the Lottie asset to animate while it’s in view.

We’ll do this in 4 steps:

1. Add the Lottie asset
2. Set up the scroll-based trigger
3. Configure the animation
   
   

1. Add the Lottie asset

You’ll need to export your Lottie animation from After Effects and upload it to your Webflow project. We exported the animation using Bodymovin. Learn how to do this in steps 3 and 4 of our full walkthrough tutorial. 

For this project, you’ll need to set up 3 sections — check out our Section tutorial or clone the project.

To find and add the animation, click the photo icon in the Assets panel from the left toolbar and drag the animation into the middle section. 

Great! Now let’s set up the trigger.

2. Set up the scroll-based trigger

Before we add our trigger, we want to make sure the animation (not another element) is selected. We want this animation to happen as we scroll. From the Interactions panel on the right toolbar, open the Element trigger menu and choose While scrolling in view.

Stay put in that Interactions panel to configure the animation in our final step.

3. Configure the animation

Let’s bring this all to life by adding an animation. Under On scroll, choose Play Scroll Animation from the Action menu. Next to Scroll Animations, click the plus sign and choose Lottie from the dropdown menu to add our first action. 

Select the animation at 100% in the Scroll Actions timeline and below, under Lottie, change it to 100%. 

Now the animation will begin at 0% and reach 100% by the time it’s scrolled out of view. 

You can turn on the live preview mode or check your work in preview to see the animation progress as you scroll. 

That’s it — you just created a scroll-based Lottie animation in the Webflow designer. Way to go!