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
10
 video lessons

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • Adobe After Effects
  • Bodymovin (After Effects extension) — download here

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