Interactions & animations

Login with your Webflow account to track your progress

Interactions & animations

Create motion and interactions that guide visitors and tell your brand's story.

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

Bring your designs to life with motion that feels smooth and intentional. In this course, you’ll learn different ways to add interactions and animation in Webflow — from single-step effects to multi-step sequences built on a visual timeline with Interactions powered by GSAP. You’ll get hands-on with timing, easing, and sequencing to create motion that feels clear, consistent, and supportive of your design. You’ll also learn how to make good animation decisions, keep things accessible, and ensure your interactions stay fast and lightweight.

Table of contents

1

Getting started

Coming soon

1

Getting started

Background & preview

Background & preview

Coming soon

1

Getting started

Why motion matters

Why motion matters

Coming soon

2

Motion in Webflow

Coming soon

2

Motion in Webflow

Intro to motion in Webflow

Intro to motion in Webflow

Coming soon

2

Motion in Webflow

Motion options in Webflow

Motion options in Webflow

Coming soon

2

Motion in Webflow

Key terms & animation concepts

Key terms & animation concepts

Coming soon

3

GSAP-powered interactions

Coming soon

3

GSAP-powered interactions

Create GSAP-powered timeline animations

Create GSAP-powered timeline animations

Coming soon

3

GSAP-powered interactions

Sequencing & timing

Sequencing & timing

Coming soon

3

GSAP-powered interactions

Test & refine

Coming soon

4

Motion strategy & best practices

Coming soon

4

Motion strategy & best practices

When to use interactions

When to use interactions

Coming soon

4

Motion strategy & best practices

When & why to animate

When & why to animate

Coming soon

4

Motion strategy & best practices

Accessible & performance-friendly motion

Accessible & performance-friendly motion

Coming soon

5

Wrap up

Coming soon

5

Wrap up

Additional resources

Additional resources

Coming soon

Progress

0%

Details

Intermediate

36m

12

Lessons

Assets & links

Assessment

Test your knowledge

Continue learning

Optimize, quality-check, & publish

Learn how to review, optimize, and confidently publish your site using Webflow’s built-in tools and best practices.

Webflow 101

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

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.

Welcome to Webflow

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

Make your site responsive

Learn how to preview, adjust, and refine your layout so it looks great on every screen size.

Welcome to Optimize

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

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.

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.

Intro to Webflow Analyze

Learn how to measure, interpret, and act on real user behavior in Webflow.

Design systems in Webflow

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

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.

AEO from Webflow

In this course, we cover what AEO is, why it is critical for the success of your website, and how to implement an effective AEO strategy for your site in Webflow.

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.

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.

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.

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.

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.

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

21-day design portfolio course

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

Localize your site in Webflow

Learn how to design and deliver meaningful web experiences for every language, culture, and region — all within Webflow.

Build & structure your site

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

Lay out & style your site

Learn how to lay out and visually style pages to fit your look and brand.

Design & manage CMS content in Webflow

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

Getting started with Webflow Enterprise

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

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.