GSAP scroll animation with glow effect in Webflow

In this Webflow tutorial, I'll show you how to create an impressive scroll animation using the new GSAP animation UI. Using a horizontal timeline, I animate several stripes, an image with a glow effect, and texts that appear and disappear in sync with the scrolling behavior. You'll learn how to define scroll triggers, correctly assign classes and work with the new timeline. Perfect for anyone who wants more control over animations in Webflow!

Webflow scroll animation now with GSAP UI

The new GSAP animation UI in Webflow offers a lot of possibilities — especially when it comes to scrolling animations. In this tutorial, I'll show you how to implement a complex scrolling interaction, including image, text, and strip animations.

Getting started with the new GSAP UI

Webflow has significantly expanded the interaction options. We're now working with a flexible timeline that can coordinate multiple actions. You can animate individual classes or attributes, which significantly speeds up the workflow.

Scroll section structure

The animation takes place within a scroll-sticky wrapper that is 100vh high. The scroll area is set to 600vh to create enough space for all animations.

Animation of stripes

A central element is the animated stripes, which slide one after the other from below into the picture and then disappear again. Each strip is a separate class with its own animation. This allows you to precisely control the timing.

Show and hide glow image

An image with a glow effect is threaded as soon as it appears in the viewport. It is then hidden again.

Animate texts

Finally, two texts are displayed — with staggered timing for a professional look. You'll learn how to work with visibility and opacity here too.

conclusion

The new GSAP UI in Webflow offers many new options for controlling animations in a targeted manner. Whether it's a trigger, time course, or goal element — you have full control.

If you want to dive even deeper into Webflow, check out my Webflow professional course on — ideal for advanced users who want to develop smart solutions for customer projects.