Interactions and animations course

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

Start the course

Start the course

Try Webflow — it's free

Interactions and animations course

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

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.

Clone this project Download project assets

Requirements

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

Course outline

CORE CONCEPTS

CORE CONCEPTS

Intro to interactions

Intro to interactions

1:22

Triggers & animations

Triggers & animations

4:31

Interpolation, easing, & smoothing

Interpolation, easing, & smoothing

2:58

Quick effects

Quick effects

2:51

INTERACTIONS EXAMPLES

INTERACTIONS EXAMPLES

Horizontal movement on scroll

Horizontal movement on scroll

2:37

Parallax movement on scroll

Parallax movement on scroll

3:10

Rotation on mouseover

Rotation on mouseover

6:27

Rotational parallax on mouseover

Rotational parallax on mouseover

4:14

Scroll progress indicator

Scroll progress indicator

2:50

Show & hide navbar on scroll

Show & hide navbar on scroll

2:33

Reveal elements on scroll

Reveal elements on scroll

4:38

Page load animation

Page load animation

4:56

Show & hide elements on click

Show & hide elements on click

5:01

Reveal elements on hover

Reveal elements on hover

3:38

3:38

More courses

Webflow 101 crash course

The Freelancer’s Journey

After Effects & Lottie in Webflow

Grid 2.0

Webflow Ecommerce

Client's Editor guide

Creating a custom portfolio

Building a business website

Ultimate web design course

Intro to web design

Web elements

CSS styling

CSS layout and positioning

CMS and dynamic content

SEO fundamentals

Requirements

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

Get started

CORE CONCEPTS (Interactions)

Learn how to build this

Download assets

Open in Webflow

Intro to Interactions (Interactions)

Learn how to build this

Download assets

Open in Webflow

Triggers & Animations (Interactions)

Learn how to build this

Download assets

Open in Webflow

Lottie inspirations

Interpolation, Easing & Smoothing (Interactions)

Interpolation, Easing & Smoothing (Interactions)

Download assets

Open in Webflow

Quick effects

Download assets

Open in Webflow

INTERACTIONS EXAMPLES (INTERACTIONS)

INTERACTIONS EXAMPLES (INTERACTIONS)

Download assets

Open in Webflow

Horizontal Movement on Scroll (Interactions)

Horizontal Movement on Scroll (Interactions)

Download assets

Open in Webflow

Parallax Movement on Scroll (Interactions)

Parallax Movement on Scroll (Interactions)

Download assets

Open in Webflow

Rotation on Hover (Interactions)

Rotation on Hover (Interactions)

Download assets

Open in Webflow

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.

Rotational Parallax on Hover (Interactions)

Download assets

Open in Webflow

Scroll Progress Indicator (Interactions)

Scroll Progress Indicator (Interactions)

Download assets

Open in Webflow

Show & Hide Navbar on Scroll (Interactions)

Show & Hide Navbar on Scroll (Interactions)

Download assets

Open in Webflow

Reveal Elements on Scroll (Interactions)

Reveal Elements on Scroll (Interactions)

Download assets

Open in Webflow

Page Load Animation (Interactions)

Page Load Animation (Interactions)

Download assets

Open in Webflow

Show & Hide Elements on Click (Interactions)

Show & Hide Elements on Click (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.

Reveal elements on hover

Download assets

Open in Webflow

More courses

Webflow 101 crash course

The Freelancer’s Journey

After Effects & Lottie in Webflow

Grid 2.0

Webflow Ecommerce

Client's Editor guide

Creating a custom portfolio

Building a business website

Ultimate web design course

Intro to web design

Web elements

CSS styling

CSS layout and positioning

CMS and dynamic content

SEO fundamentals

Community Forum

Share your creations and get help from our active community.

Contact Support

We're available Monday–Friday, 6 a.m.–6 p.m. PT.