Master GSAP Interactions in Webflow for Smooth Animations

By the end of this lesson you’ll be able to build a smooth, multi-layered hero reveal with GSAP interactions in Webflow. We’re not just making things move — we’re connecting what happens when someone lands on the page with how the whole layout settles into place to greet them. Done well, that first bit of motion changes someone’s entire first impression of your work.

The big shift is the horizontal timeline. No more scrolling through a cluttered vertical stack of separate actions and initial states — you can see and organize the whole sequence in one view. And you don’t have to throw away what you already know: the classic interactions and the new GSAP engine live side by side, each doing what it’s best at.

We’ll go through the core ideas with no jargon and one real, practical build. Once the why behind triggers, targets, and actions clicks, you’ll have what you need to make layout animations that feel alive.

How it works

An interaction is just a bridge between what a user does and how the page responds. In the classic system you built those chains inside a vertical timeline — and a single logical sequence often had to be split across several separate interactions just to stay manageable. The new GSAP system changes that with a visual horizontal timeline, where you manage, duplicate, and organize every staggered action in one unified sequence.

You also stop worrying about a separate initial state. GSAP actions absorb it through a type property: set an action to to (animate from the element’s designer layout to a new state), from (start at an offset and animate back to the designer layout), or from to (define both ends at once). That makes effects like a staggered text swap much cleaner to build.

The engine still has gaps, though — right now it can’t animate custom CSS variables, blur filters, or border-radius directly. The workaround is a hybrid one: define helper classes in your style guide that carry those properties, give them ordinary CSS transitions, and use GSAP actions to add or remove the classes. You get a smooth, properly transitioned result without GSAP touching the property itself.

Finally, there’s a classic timing conflict to solve: a page-load reveal and a mouse-move effect both trying to control the same elements at once. If both are live from the start, the visitor’s cursor disrupts the entrance animation. The mental model that fixes it is a gatekeeper element — a hidden wrapper that’s the sole listener for the mouse-move trigger, switched from display: none to block by the page-load timeline only at the very end of the intro. The cursor effect simply waits for its cue.

How to use it

1. Set up the hero structure.

   • Set the hero section to height: 100vh and position: relative.
   • Inside it, add an image wrapper with position: absolute, centered with top: 50% and a translateY(-50%).
   • Give the wrapper width: 20%, and padding-top: 20% so it stays a perfect square at any size (percentage padding is calculated off the parent width, keeping a 1:1 ratio).
   • Put the hero image inside, set width: 100dvw and height: 100vh, and max-width: none so Webflow doesn’t override the viewport width.

2. Center the image with custom CSS. The image is absolutely positioned and needs to stay centered as the wrapper expands, so set these offsets in its style panel. This approach keeps transform free for the scaling animation.

   /* On the image, in the Webflow style panel */
   top: calc(-1 * (50vh - 50%));
   left: calc(-1 * (50dvw - 50%));

3. Create the helper classes. In your style guide, make a dummy div and add two end-state classes: cc-animate-image (sets blur to 0px) and cc-animate-image-wrapper (sets border-radius to 0px). Give the base elements matching CSS transitions on their filter and border-radius so the change animates smoothly when GSAP toggles the class.

4. Build the GSAP page-load timeline. Create a new Page Load interaction with GSAP:

   • Action 1 (image): type: to, scale: 1.02, and add cc-animate-image to unblur it.
   • Action 2 (wrapper): type: to, width/height to 100%, and add cc-animate-image-wrapper to square off the corners.
   • Actions 3 & 4 (heading rows): turn on Split Text (by word) with an offset-time stagger of 0.1s. Row one uses a from of 100% on Y so the words rise into view; row two uses a to of -100% on Y to slide out of sight.

5. Hook up the mouse-move trigger. Add a div inside the hero (display: none, position: absolute, full-bleed) to act as the listener. At the very end of the page-load timeline, add an action that sets its display to block. Then create a classic mouse-move interaction on that wrapper, animating the image-left-margin and image-top-margin variables between -1% and 1% to nudge the centered image as the cursor moves.