Interactions & animations course

Start off the year with a 21-day portfolio challenge

Intermediate–Advanced
1hr 46min

Start off the year with a 21-day portfolio challenge

Building layouts and styling pages is a great start, but adding interactions and animations can give your site a new level of attention-grabbing interactivity. This course provides a general overview building interactions in Webflow.

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

Yes, this course is from the future.

Use this version to clone the completed project
Blank pages without hitting page limits
  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser

Lessons in this course

Getting started
Coming soon
Intro to Interactions
1:22
Coming soon
Triggers and animations
4:31
Coming soon
Interpolation, easing, and smoothing
2:58
Coming soon
Quick effects
2:51
Coming soon
Interaction Examples
Coming soon
Horizontal movement on scroll
2:37
Coming soon
Parallax movement on scroll
3:10
Coming soon
Scroll progress indicator
2:50
Coming soon
Navbar show & hide on scroll
2:33
Coming soon
Reveal on scroll
4:38
Coming soon
Page loader animation
4:10
Coming soon
Show and hide on click
5:01
Coming soon
Reveal on hover
3:38
Coming soon
Lottie Examples
Coming soon
After Effects and Lottie course introduction
1:19
Coming soon
How to install Bodymovin
3:14
Coming soon
Animate when in view
2:24
Coming soon
Cinema 4D in Webflow
20:00
Coming soon
Click based animations
1:40
Coming soon
Animate a video on scroll
6:34
Coming soon
3D phone rotation on scroll
22:08
Coming soon

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

Building layouts and styling pages is a great start, but adding interactions and animations can give your site a new level of attention-grabbing interactivity. This course provides a general overview building interactions in Webflow.

Use this version to clone the completed project
Blank pages without hitting page limits
Enroll for free

Course outline

Getting started
Coming soon
Intro to Interactions
1:22
Coming soon
Triggers and animations
4:31
Coming soon
Interpolation, easing, and smoothing
2:58
Coming soon
Quick effects
2:51
Coming soon
Interaction Examples
Coming soon
Horizontal movement on scroll
2:37
Coming soon
Parallax movement on scroll
3:10
Coming soon
Rotate on mouseover
6:27
Coming soon
Scroll progress indicator
2:50
Coming soon
Navbar show & hide on scroll
2:33
Coming soon
Reveal on scroll
4:38
Coming soon
Page loader animation
4:10
Coming soon
Show and hide on click
5:01
Coming soon
Reveal on hover
3:38
Coming soon
Lottie Examples
Coming soon
After Effects and Lottie course introduction
1:19
Coming soon
How to install Bodymovin
3:14
Coming soon
Animate when in view
2:24
Coming soon
Animate a video on scroll
22:08
Coming soon
Cinema 4D in Webflow
20:00
Coming soon
Lottie overview
14:48
Coming soon
Click based animations
1:40
Coming soon
Animate a video on scroll
6:34
Coming soon
3D phone rotation on scroll
22:08
Coming soon

Related courses

Interactions & animations course

23
Lessons
Getting started
Getting started
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Interaction Examples
Interaction Examples
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Lottie Examples
Lottie Examples
Coming soon
Coming soon
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!
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!
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!
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!

Interpolation, easing, and smoothing

Transcript
Download assets
Clone this project
Read the full article

Horizontal movement on scroll

Transcript
Download assets
Clone this project
Read the full article

Parallax movement on scroll

Learn how to apply a scroll based interaction to multiple images. The images in the section will appear to be moving at varying velocities. This simulates a realistic feeling of depth because images that appear closer also appear to move faster.

Transcript
Download assets
Clone this project
Read the full article

Scroll progress indicator

A scroll progress indicator helps visitors track where they are on a page. 

In this lesson:

  1. Design the progress bar
  2. Set up a scroll trigger
  3. Set up a scroll animation
  4. Cover transform origin
Transcript
Download assets
Clone this project
Read the full article

Navbar show & hide on scroll

Transcript
Download assets
Clone this project
Read the full article

Page loader animation

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

Transcript
Download assets
Clone this project
Read the full article

Show and hide on click

In this lesson:

  1. Create an animation to make an element appear
  2. Create an animation to make an element disappear
  3. Add a second trigger element to show and configure both to show/hide on click

Transcript
Download assets
Clone this project
Read the full article

Reveal on hover

Use a hover interaction to reveal elements on hover.

In this lesson:

  1. Build an animation to hover in
  2. Build an animation to hover out 
  3. Apply the animation to other elements

Transcript
Download assets
Clone this project
Read the full article

After Effects and Lottie course introduction

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

Transcript
Download assets
Clone this project
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
Download assets
Clone this project
Read the full article

Animate when in view

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

Transcript
Download assets
Clone this project
Read the full article

Animate a video 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.

Transcript
Download assets
Clone this project
Read the full article

Cinema 4D in Webflow

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

Transcript
Download assets
Clone this project
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
Download assets
Clone this project
Read the full article

Click based animations

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

Transcript
Download assets
Clone this project
Read the full article

Animate a video on scroll

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

Transcript
Download assets
Clone this project
Read the full article

3D phone rotation on scroll

Transcript
Download assets
Clone this project
Read the full article

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser
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

Anna Kelian

Learning & Development Coach

Edited by

Stacy Han

Video Producer

McGuire Brannon

Director of Education

Designs by

-

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.