After Effects and Lottie course introduction

After Effects and Lottie course introduction

New

1:19

How to install Bodymovin

How to install Bodymovin

New

3:14

After Effects and Lottie in Webflow

After Effects and Lottie in Webflow

New

14:49

Click based animations

Click based animations

New

1:40

Animate when in view

Animate when in view

New

2:24

Animate while scrolling

Animate while scrolling

New

2:03

Page loader animation

Page loader animation

New

4:11

Animate a video on scroll

Animate a video on scroll

New

6:34

Cinema 4D in Webflow

Cinema 4D in Webflow

New

20:00

3D phone rotation on scroll

3D phone rotation on scroll

New

22:08

new course
CSS grid landing page tutorial (36min)

Lesson info


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!

Lesson info

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets

Related tutorial

Clone this projectDownload project assets

Transcript