As a part of our series on After Effects and Lottie in Webflow, we produced a Lottie animation in After Effects. In this guide, we will configure the Lottie asset to animate while it’s visible.
We will achieve this in 4 phases:
- Incorporate the Lottie asset
- Establish the scroll-trigger
- Set up the animation
1. Incorporate the Lottie asset
You will have to export your Lottie animation from After Effects and upload it to your Webflow project. We exported the animation using Bodymovin. Find out how to accomplish this in steps 3 and 4 of our full guide.
For this assignment, you will need to prepare 3 sections — refer to our Section guide or clone the project.
To locate and add the animation, select the image icon in the Assets panel from the left sidebar and drop the animation into the central section.
Excellent! Now, let’s establish the trigger.
2. Set up the scroll-based trigger
Prior to adding our trigger, we need to ensure the animation (not another element) is chosen. We want this animation to occur as we scroll. From the Interactions panel on the right sidebar, open the Element trigger menu and opt for While scrolling in view.
Stay within that Interactions panel to configure the animation in our ultimate step.
3. Set up the animation
Let’s bring this to life by introducing an animation. Under On scroll, pick Play Scroll Animation from the Action menu. Beside Scroll Animations, tap on the plus symbol and select Lottie from the dropdown menu to include our initial action.
Choose the animation at 100% in the Scroll Actions timeline and below, under Lottie, adjust it to 100%.
Now, the animation will commence at 0% and reach 100% by the time it’s scrolled out of view.
You can enable the live preview mode or assess your work in preview to observe the animation progression as you scroll.
- Include or eliminate Workspace spots and members - April 15, 2024
- Centering box summary - April 15, 2024
- Store a site for future reference - April 15, 2024
EN 
ZH 
ZH_CN 
KO 
JA