All courses
Web animations with After Effects & Lottie
Login with your Webflow account to track your progress

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos.

In this course, we’ll show you how to use Adobe After Effects to build movement into your design— visually, without any code. Learn how to create an animation that triggers when someone loads a webpage, clicks, hovers, or scrolls. Use this technology to render an image sequence in Cinema 4D or Blender, and control that sequence based on the position of your mouse. This course will give you the tools to use both After Effects and Webflow to their full potential. 

Requirements:

Table of contents

1

Getting started

Coming soon

1

After Effects and Lottie course introduction
1:19
After Effects and Lottie course introduction
Coming soon

1

How to install Bodymovin
3:14
How to install Bodymovin
Coming soon

1

Lottie overview
14:48
Lottie overview
Coming soon

2

Lottie inspirations

Coming soon

2

Click based animations
1:40
Click based animations
Coming soon

2

Animate when in view
2:24
Animate when in view
Coming soon

2

Animate while scrolling
2:03
Animate while scrolling
Coming soon

2

Page loader animation
4:10
Page loader animation
Coming soon

2

Animate a video on scroll
6:34
Animate a video on scroll
Coming soon

2

Cinema 4D in Webflow
20:00
Cinema 4D in Webflow
Coming soon

2

3D phone rotation on scroll
22:08
3D phone rotation on scroll
Coming soon

Progress

0%

Details

Intermediate
1h 18m
10
Lessons

Assets & links

Continue learning