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.

Webflow has a new UI, so visuals may vary slightly, but the course content is still relevant.

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

Intro to Interactions

Coming soon

1

Interpolation, easing, and smoothing

Interpolation, easing, and smoothing

Coming soon

1

Triggers and animations

Triggers and animations

Coming soon

1

Quick effects

Coming soon

2

Interaction Examples

Coming soon

2

Horizontal movement on scroll

Horizontal movement on scroll

Coming soon

2

Parallax movement on scroll

Parallax movement on scroll

Coming soon

2

Rotate on mouseover

Rotate on mouseover

Coming soon

2

Scroll progress indicator

Scroll progress indicator

Coming soon

2

Navbar show & hide on scroll

Navbar show & hide on scroll

Coming soon

2

Reveal on scroll

Reveal on scroll

Coming soon

2

Page loader animation

Page loader animation

Coming soon

2

Show and hide on click

Show and hide on click

Coming soon

2

Reveal on hover

Reveal on hover

Coming soon

3

Lottie Examples

Coming soon

3

After Effects and Lottie course introduction

After Effects and Lottie course introduction

Coming soon

3

How to install Bodymovin

How to install Bodymovin

Coming soon

3

Animate when in view

Animate when in view

Coming soon

3

Animate a video on scroll

Animate a video on scroll

Coming soon

3

Cinema 4D in Webflow

Cinema 4D in Webflow

Coming soon

3

Lottie overview

Lottie overview

Coming soon

3

Click based animations

Click based animations

Coming soon

3

Animate a video on scroll

Animate a video on scroll

Coming soon

Progress

0%

Details

Intermediate - Advanced

1h 59m

21

Lessons

Assets & links

Assessment

Test your knowledge

Continue learning

Getting started with Webflow Enterprise

Get familiar with Webflow’s website experience platform and Enterprise features.

Landing page generator for Ryan Reynolds

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

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.

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.

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.

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

Webflow 101

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

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.

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.

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.

Design systems in Webflow

Learn how to create a design system in Webflow for consistent and scalable site building.

Build & structure your site

Learn how to add different types of HTML elements to structure pages on your site.

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.

Accessibility on the web

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

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.

Design & manage CMS content in Webflow

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

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.

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.

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.

21-day design portfolio course

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

Welcome to Optimize

Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and the power of AI.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

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.