Control GSAP Interactions in Webflow (Speed & Jump To)

Webflow’s GSAP event settings — control, delay, jump to, and speed — are where interactions stop being one-off animations and start behaving like a system you direct. Once you know what each one does, you can pause a background loop while someone reaches for your main call to action, freeze an effect the moment it’s served its purpose, or open and close a popup with a single interaction.

These four settings show up across almost every trigger type, and they’re deceptively powerful. Rather than read definitions, we’ll work through three real scenarios that make the differences click — especially the subtle but important gap between pausing an animation and stopping it.

How it works

The first thing to understand is a limitation and its escape hatch. A native page-load interaction can’t take any extra events — there’s no “add another event” button. So if you want a page-load animation that also responds to hover or click, you build the interaction on a custom event instead. That unlocks the plus button, letting you mix page-load, hover, and click events inside one interaction. Webflow generates a small snippet for the custom event; you paste it into a page-load JavaScript function (in Before </body> tag) so your own code fires the interaction, while everything else stays in the interactions panel.

Now the settings themselves. Control decides what an event does to the timeline: play and pause/resume move or hold the playhead, stop halts the animation and resets it to the start, and no action deliberately does nothing to the timeline’s position. Speed is separate — it changes how fast the timeline runs without repositioning it, so a speed of 0 freezes the animation in place and 1 runs it normally. Jump to repositions the playhead to a specific point.

The key insight is when to use speed and no-action instead of pause/resume. Pause/resume is perfect when you just want to hold and continue — like a background loop that pauses while someone hovers your main CTA, then resumes on hover-out. But imagine an animation that must stop for good once a button is clicked. If hover-in/hover-out use pause/resume, the hover-out after the click would restart the animation from the beginning — exactly what you don’t want. The fix: set the hover events to no action and use speed (0 to freeze, 1 to resume) for the pause-like feel, then a stop on the click. Because no-action events never touch the timeline, they have no power to restart an animation the click has already stopped.

The last idea is elegance: toggle play/reverse. Assign both a popup’s open and close buttons a click event on one interaction, set control to toggle play/reverse, and the first click plays the animation forward (open) while the next plays it backward (close). One interaction, one animation — no duplicating-and-reversing like the classic approach.

How to use it

1. Example 1 — pause a background loop near your CTA. Build an infinite background animation (two blurred circles orbiting via transform-origin offsets and a 360° Z rotation, repeat: infinite). Create the interaction from a custom event so you can add hover events too. Give your key buttons a shared attribute like element-role="important-cta", then add a mouse-enter event with control pause and a mouse-leave event with control resume, both targeting that attribute. Paste Webflow’s custom-event snippet into a page-load function so the loop starts on load.

2. Example 2 — freeze, then stop on click. For a banner that pulses (repeat: infinite, back and forth), start it with a first mouse-enter on the section. On the button, add mouse-enter and mouse-leave events with control no action — set the enter event’s speed to 0 and the leave event’s speed to 1. Finally add a first click on the button with control stop and jump to 0, so the pulse ends permanently and never restarts on hover-out.

3. Example 3 — one interaction opens and closes a popup. Give the open button element-role="open-popup" and the close button element-role="close-popup". Build a single action that reveals the popup wrapper (display: flex, opacity 0 → 100%). Add two click events — one per role — and set control to toggle play/reverse on both. Clicking open plays forward; clicking close plays in reverse.

The custom-event trigger in Example 1 uses a small JavaScript snippet (Webflow generates it for you and the cloneable includes it). Grab it from the cloneable rather than retyping it by hand.