After Effects and Lottie course introduction

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

interactions-animations
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

Many consider Adobe After Effects the industry standard for motion graphics. And you can use Webflow to bring After Effects to the web.

In our course, After Effects and Lottie in Webflow, we’ll teach you how to set up an After Effects animation to animate when a page loads, when it scrolls into view, while scrolling, and on click. We’ll show you how to render an image sequence in Cinema 4D or Blender, and control that sequence based on mouse position. 

All visually — without writing a single line of code.

These animation are built on Airbnb’s Lottie and can be created in 4 steps:

  1. Create an animation in After Effects
  2. Export the animation using an extension called Bodymovin
  3. Add your animation
  4. Set up your trigger and configure the animation

So check out After Effects and Lottie in Webflow and learn how you can use both After Effects and Webflow to their full potential.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?