University
Log in
Search
⌘E
My learning
Try Webflow — it's free
Learn
Courses
Learning Paths
Videos
Docs
Resources
Certifications
Interactive Learning
Glossary
The Webflow Way
Engage
Support
Community
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
All courses
Interactions & animations course
This course is no longer maintained.
This course uses Classic Interactions (IX2). Webflow now has a newer, GSAP-powered interactions engine (IX3).
Take the updated course
→
Login with your Webflow account to track your progress

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

Building layouts and styling pages is a great start, but adding interactions and animations can give your site a new level of attention-grabbing interactivity. This course provides a general overview building interactions in Webflow.

Table of contents

1

Getting started

Coming soon

1

Intro to Interactions
1:22
Intro to Interactions
Coming soon

1

Interpolation, easing, and smoothing
2:58
Interpolation, easing, and smoothing
Coming soon

1

Triggers and animations
4:31
Triggers and animations
Coming soon

1

Quick effects
2:51
Quick effects
Coming soon

2

Interaction Examples

Coming soon

2

Horizontal movement on scroll
2:37
Horizontal movement on scroll
Coming soon

2

Parallax movement on scroll
3:10
Parallax movement on scroll
Coming soon

2

Rotate on mouseover
6:27
Rotate on mouseover
Coming soon

2

Scroll progress indicator
2:50
Scroll progress indicator
Coming soon

2

Navbar show & hide on scroll
2:33
Navbar show & hide on scroll
Coming soon

2

Reveal on scroll
4:38
Reveal on scroll
Coming soon

2

Page loader animation
4:10
Page loader animation
Coming soon

2

Show and hide on click
5:01
Show and hide on click
Coming soon

2

Reveal on hover
3:38
Reveal on hover
Coming soon

3

Lottie Examples

Coming soon

3

After Effects and Lottie course introduction
1:19
After Effects and Lottie course introduction
Coming soon

3

How to install Bodymovin
3:14
How to install Bodymovin
Coming soon

3

Animate when in view
2:24
Animate when in view
Coming soon

3

Animate a video on scroll
22:08
Animate a video on scroll
Coming soon

3

Cinema 4D in Webflow
20:00
Cinema 4D in Webflow
Coming soon

3

Lottie overview
14:48
Lottie overview
Coming soon

3

Click based animations
1:40
Click based animations
Coming soon

3

Animate a video on scroll
6:34
Animate a video on scroll
Coming soon

Progress

0%

Details

Beginner
1h 59m
21
Lessons

Assets & links

Assessment

Test your knowledge
Enroll Now
→

Continue Learning

A glowing AI sparkle icon within a deconstructed pink neon box

AI guardrails for teams

Manage team AI access, understand the reach of AI-assisted changes, and review what changed before your site goes live.

Collaborate with your team

Learn how to set up roles, permissions, and workflows in Webflow so your entire team can work together safely, confidently, and efficiently.

Design & manage CMS content in Webflow

Learn how to create, manage, and style dynamic content and collections on your site using Webflow’s CMS.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.
Comment cursor hovering over a text box

Webflow for Reviewers

Learn how to review and give feedback with confidence in Webflow.
Publishing rocket icon flying through glass

Webflow for Marketers

Learn how to build, edit, and publish with confidence in Webflow.