Create a GSAP-powered timeline animation

We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos.

Create a GSAP-powered timeline animation

Build a complete hero animation using GSAP-powered interactions on a visual timeline.

No items found.

1 Getting started

Coming soon

1 Getting started

Background & preview

3:00

Background & preview

Coming soon

1 Getting started

Why motion matters

3:00

Why motion matters

Coming soon

2 Motion in Webflow

Coming soon

2 Motion in Webflow

Intro to motion in Webflow

5:08

Intro to motion in Webflow

Coming soon

2 Motion in Webflow

Motion options in Webflow

5:00

Motion options in Webflow

Coming soon

2 Motion in Webflow

Key terms & animation concepts

4:00

Key terms & animation concepts

Coming soon

3 GSAP-powered interactions

Coming soon

3 GSAP-powered interactions

Create a GSAP-powered timeline animation

9:08

Create a GSAP-powered timeline animation

Coming soon

3 GSAP-powered interactions

Sequencing & timing

3:00

Sequencing & timing

Coming soon

3 GSAP-powered interactions

Test & refine

3:00

Test & refine

Coming soon

4 Motion strategy & best practices

Coming soon

4 Motion strategy & best practices

When to use interactions

9:05

When to use interactions

Coming soon

4 Motion strategy & best practices

When & why to animate

3:00

When & why to animate

Coming soon

4 Motion strategy & best practices

Accessible & performance-friendly motion

2:00

Accessible & performance-friendly motion

Coming soon

5 Wrap up

Coming soon

5 Wrap up

Additional resources

2:00

Additional resources

Coming soon

Course progress

Assessment

Test your knowledge

Up next

Sequencing & timing

Refine motion through timing, overlap, and rhythm.