Interactions and animations course

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

Interactions and animations course

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

14
 Video Lessons
Intermediate–Advanced
52 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.

Requirements

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

Course outline

CORE CONCEPTS

New

Intro to interactions

New

1:22

Triggers & animations

New

4:31

Interpolation, easing, & smoothing

New

2:58

INTERACTIONS EXAMPLES

New

Horizontal movement on scroll

New

2:37

Parallax movement on scroll

New

3:10

Rotation on mouseover

New

6:27

Rotational parallax on mouseover

New

4:14

Scroll progress indicator

New

2:50

Show & hide navbar on scroll

New

2:33

Reveal elements on scroll

New

4:38

Page load animation

New

4:56

Show & hide elements on click

New

5:01

Reveal elements on hover

New

3:38

3:38

14
 video lessons
Intermediate–Advanced
52 min

Requirements

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

Get started

Lottie inspirations

Rotational Parallax on Hover (Interactions)

Use rotational parallax to give objects the appearance of movement in 3D space — all controlled by the position of your mouse.

Tutorial:
Rotational Parallax on Hover (Interactions)
Download assets
Open in Webflow

Reveal elements on hover

Learn how to reveal child elements when you hover over the parent using a hover interaction.

Tutorial:
Reveal elements on hover
Download assets
Open in Webflow