Pause the background video

Web animations with After Effects & Lottie

Start off the year with a 21-day portfolio challenge

Intermediate
1hr 19min

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:

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

Yes, this course is from the future.

Clone this project
Use this version to clone
the completed project
Clone this project
Blank pages without hitting page limits

Lessons in this course

Get started
Lottie inspirations

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0
%

Completed

0
of
10

Lessons done

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:

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Get started
Lottie inspirations

Related courses

Web animations with After Effects & Lottie

10
Lessons
Get started
Get started
Lottie inspirations
Lottie inspirations

After Effects and Lottie course introduction

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

Transcript
Read the full article

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.

Transcript
Read the full article

Lottie overview

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

Transcript
Read the full article

Click based animations

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

Transcript
Read the full article

Animate when in view

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

Transcript
Read the full article

Animate while scrolling

Animate an After Effects animation as the page scrolls.

Transcript
Read the full article

Page loader animation

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

Transcript
Read the full article

Animate a video on scroll

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

Transcript
Read the full article

Cinema 4D in Webflow

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

Transcript
Read the full article

Requirements

Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits

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

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

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