After Effects & Lottie in Webflow

Create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, then animate them in your Webflow site.

After Effects & Lottie in Webflow

Create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, then animate them in your Webflow site.

10
 Video Lessons

Requirements

Course outline

After Effects and Lottie course introduction

Coming soon!

New

1:19

How to install Bodymovin

Coming soon!

New

3:14

After Effects and Lottie in Webflow

Coming soon!

New

14:49

Click based animations

Coming soon!

New

1:40

Animate when in view

Coming soon!

New

2:24

Animate while scrolling

Coming soon!

New

2:03

Page loader animation

Coming soon!

New

4:11

Animate a video on scroll

Coming soon!

New

6:34

Cinema 4D in Webflow

Coming soon!

New

20:00

3D phone rotation on scroll

Coming soon!

New

22:08

10
 Video Lessons

Requirements

Get started

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

An overview of what the After Effects and Lottie in Webflow course will cover.

3:14
3:14
How to install Bodymovin

How to install and use the Bodymovin extension for After Effects, which lets you export After Effects compositions as JSON files.

14:49
14:49
Overview of After Effects and Lottie in Webflow

How to create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, then animate them in your Webflow site.

Lottie inspirations

Animate when in view

Animate an After Effects animation when the Lottie file scrolls into view.

Tutorial:
Animate when in view
Download assets
Open in Webflow

3D phone rotation on scroll

Use Cinema 4D and After Effects to render a 3D phone as an image sequence, import into Webflow, then tie it to your website's scroll position.

Tutorial:
3D phone rotation on scroll
Download assets
Open in Webflow

Get started

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

An overview of what the After Effects and Lottie in Webflow course will cover.

3:14
3:14
How to install Bodymovin

How to install and use the Bodymovin extension for After Effects, which lets you export After Effects compositions as JSON files.

14:49
14:49
Overview of After Effects and Lottie in Webflow

How to create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, then animate them in your Webflow site.

Lottie inspirations

Animate when in view

Animate an After Effects animation when the Lottie file scrolls into view.

Tutorial:
Animate when in view
Download assets
Open in Webflow

3D phone rotation on scroll

Use Cinema 4D and After Effects to render a 3D phone as an image sequence, import into Webflow, then tie it to your website's scroll position.

Tutorial:
3D phone rotation on scroll
Download assets
Open in Webflow