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.

Requirements

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

Course outline

CORE CONCEPTS

Coming soon!

New

Intro to interactions

Coming soon!

New

1:22

Triggers & animations

Coming soon!

New

4:31

Interpolation, easing, & smoothing

Coming soon!

New

2:58

Quick effects

Coming soon!

New

2:51

INTERACTIONS EXAMPLES

Coming soon!

New

Horizontal movement on scroll

Coming soon!

New

2:37

Parallax movement on scroll

Coming soon!

New

3:10

Rotation on mouseover

Coming soon!

New

6:27

Rotational parallax on mouseover

Coming soon!

New

4:14

Scroll progress indicator

Coming soon!

New

2:50

Show & hide navbar on scroll

Coming soon!

New

2:33

Reveal elements on scroll

Coming soon!

New

4:38

Show & hide elements on click

Coming soon!

New

5:01

Reveal elements on hover

Coming soon!

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

Intro to Interactions (Interactions)

Triggers & Animations (Interactions)

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

Get started

Intro to Interactions (Interactions)

Triggers & Animations (Interactions)

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