Summary

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:

Lessons in this course

Get started

Coming soon

After Effects and Lottie course introduction
1:19
Coming soon

How to install Bodymovin
3:14
Coming soon

Lottie overview
14:48
Coming soon

Lottie inspirations

Coming soon

Click based animations
1:40
Coming soon

Animate when in view
2:24
Coming soon

Animate while scrolling
2:03
Coming soon

Page loader animation
4:10
Coming soon

Animate a video on scroll
6:34
Coming soon

Cinema 4D in Webflow
20:00
Coming soon

3D phone rotation on scroll
22:08
Coming soon

Add web animations with After Effects & Lottie

10
Lessons
Get started

Get started

Coming soon

Coming soon

Coming soon

Coming soon
Lottie inspirations

Lottie inspirations

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

After Effects and Lottie course introduction

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

Download assets
Clone this project
Learn more
Transcript

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.

Download assets
Clone this project
Learn more
Transcript

Lottie overview

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

Download assets
Clone this project
Learn more
Transcript

Click based animations

Animate an After Effects animation when people click on a given element.

Download assets
Clone this project
Learn more
Transcript

Animate when in view

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

Download assets
Clone this project
Learn more
Transcript

Animate while scrolling

Animate an After Effects animation as the page scrolls.

Download assets
Clone this project
Learn more
Transcript

Page loader animation

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

Download assets
Clone this project
Learn more
Transcript

Animate a video on scroll

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

Download assets
Clone this project
Learn more
Transcript

Cinema 4D in Webflow

Create a 3D animation in Cinema 4D and import it into your website.

Download assets
Clone this project
Learn more
Transcript
Transcript

Requirements

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Shannon Fisher

Sr. Technical Writer

Micah Johnson

Webflow educator

Edited by

Stacy Han

Video Producer

Grímur Grimsson

Video Producer

Designs by

Sara Lundberg

Education designer

McGuire Brannon

Director of Education

Related courses

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

Shoot, something didn't work. Try again later, bud.