University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
All courses
Interactions & animations 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

Intermediate - Advanced
1h 59m
21
Lessons

Assets & links

Enroll Now
→

Continue learning

CMS & dynamic content

Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content's structure and style.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

SEO fundamentals

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.