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.

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

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

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!

Intro to Interactions

Download assets
Clone this project
Transcript
Learn more

Triggers and animations

Download assets
Clone this project
Transcript
Learn more

Interpolation, easing, and smoothing

Download assets
Clone this project
Transcript
Learn more

Horizontal movement on scroll

Download assets
Clone this project
Transcript
Learn more

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.

Download assets
Clone this project
Transcript
Learn more

Rotate on mouseover

Download assets
Clone this project
Transcript
Learn more

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
Download assets
Clone this project
Transcript
Learn more

Navbar show & hide on scroll

Download assets
Clone this project
Transcript
Learn more

Page loader animation

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

Download assets
Clone this project
Transcript
Learn more

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

Download assets
Clone this project
Transcript
Learn more

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

Download assets
Clone this project
Transcript
Learn more

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
Transcript
Learn more

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
Transcript
Learn more

Animate when in view

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

Download assets
Clone this project
Transcript
Learn more

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.

Download assets
Clone this project
Transcript
Learn more

Cinema 4D in Webflow

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

Download assets
Clone this project
Transcript
Learn more

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
Transcript
Learn more

Click based animations

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

Download assets
Clone this project
Transcript
Learn more

Animate a video on scroll

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

Download assets
Clone this project
Transcript
Learn more

3D phone rotation on scroll

Download assets
Clone this project
Transcript
Learn more

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser

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

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.