Interactions and animations course

Learn how to bring your designs to life with advanced website interactions and animations.

15
 Video Lessons
Intermediate–Advanced
55 min

About this course

Building layouts and styling pages is a great start, but adding interactions and animations can give your site a new level of interactivity that will really grab your visitors' attention. This course provides a general overview of how to build interactions in Webflow, then walks through a series of examples that you can follow along with to teach you how and when to bring interactions into your designs.

Assets

Looking for the assets used in this course? We put all the magic inside a zip file, and you can find it 

right here
.

Requirements

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

Course outline

CORE CONCEPTS

Intro to interactions

1:22

Triggers & animations

4:31

Interpolation, easing, & smoothing

2:58

Quick effects

2:51

INTERACTIONS EXAMPLES

Horizontal movement on scroll

2:37

Parallax movement on scroll

3:10

Rotation on mouseover

6:27

Rotational parallax on mouseover

4:14

Scroll progress indicator

2:50

Show & hide navbar on scroll

2:33

Reveal elements on scroll

4:38

Page load animation

4:56

Show & hide elements on click

5:01

Reveal elements on hover

3:38

15
 video lessons
Intermediate–Advanced
55 min