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.

8
 Video Lessons
8
 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 showcase

Animate when in view

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

Learn how to build this
Download assets
Open in Webflow

Page loader animation

Show an After Effects animation as a placeholder before the website loads.

Learn how to build this
Download assets
Open in Webflow

Animate a video on scroll

Animate a video from After Effects as you scroll down the page.

Learn how to build this
Download assets
Open in Webflow