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.

Interactions and animations course

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

Enroll for free

Start the course

Try Webflow — it's free

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.

Clone this project Download project assets

Requirements

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

Course outline

CORE CONCEPTS

CORE CONCEPTS

Coming soon

New

CORE CONCEPTS

Coming soon!

Intro to interactions

Intro to interactions

Coming soon

New

1:22

Intro to interactions

Coming soon!

1:22

Triggers & animations

Triggers & animations

Coming soon

New

4:31

Triggers & animations

Coming soon!

4:31

Interpolation, easing, & smoothing

Interpolation, easing, & smoothing

Coming soon

New

2:58

Interpolation, easing, & smoothing

Coming soon!

2:58

Quick effects

Quick effects

Coming soon

New

2:51

Quick effects

Coming soon!

2:51

INTERACTIONS EXAMPLES

INTERACTIONS EXAMPLES

Coming soon

New

INTERACTIONS EXAMPLES

Coming soon!

Horizontal movement on scroll

Horizontal movement on scroll

Coming soon

New

2:37

Horizontal movement on scroll

Coming soon!

2:37

Parallax movement on scroll

Parallax movement on scroll

Coming soon

New

3:10

Parallax movement on scroll

Coming soon!

3:10

Rotation on mouseover

Rotation on mouseover

Coming soon

New

6:27

Rotation on mouseover

Coming soon!

6:27

Rotational parallax on mouseover

Rotational parallax on mouseover

Coming soon

New

4:14

Rotational parallax on mouseover

Coming soon!

4:14

Scroll progress indicator

Scroll progress indicator

Coming soon

New

2:50

Scroll progress indicator

Coming soon!

2:50

Show & hide navbar on scroll

Show & hide navbar on scroll

Coming soon

New

2:33

Show & hide navbar on scroll

Coming soon!

2:33

Reveal elements on scroll

Reveal elements on scroll

Coming soon

New

4:38

Reveal elements on scroll

Coming soon!

4:38

Show & hide elements on click

Show & hide elements on click

Coming soon

New

5:01

Show & hide elements on click

Coming soon!

5:01

Reveal elements on hover

Reveal elements on hover

Coming soon

New

3:38

3:38

Reveal elements on hover

Coming soon!

3:38

3:38

More courses

Webflow 101 crash course

Freelance web design boot camp

Moving your business online

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)

Download assets

Open in Webflow

Intro to Interactions (Interactions)

Intro to interactions

Download assets

Open in Webflow

Triggers & Animations (Interactions)

Triggers & animations

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

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

Get started

CORE CONCEPTS (Interactions)

Download assets

Open in Webflow

Intro to Interactions (Interactions)

Intro to interactions

Download assets

Open in Webflow

Triggers & Animations (Interactions)

Triggers & animations

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

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

Freelance web design boot camp

Moving your business online

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.