Mastering GSAP Interactions in Webflow – Part 3-4: Event Settings Deep Dive (Control, Speed, Delay, Jump To & More)

In these 2 lessons, we explore how the Event Settings panel works behind the scenes and how properties like Control, Speed, Delay, and Jump To can be combined to build cleaner, more flexible, and more intentional interactions.
You’ll learn how to:
✅ Pause and resume infinite animations based on user interaction
✅ Freeze a timeline without breaking its logic using Speed = 0 and Control: No Action
✅ Open and close components (like popups) using only one interaction with Toggle Play/Reverse
✅ Combine multiple event triggers using custom attributes
✅ Trigger Page Load animations using Custom Events and a tiny code snippet
✅ Build hover animations that play forward and backward using one timeline
✅ Create a simple state machine using Jump To + Pause
✅ Switch background colors with clean, attribute-driven logic
✅ Use CSS transitions alongside GSAP for smoother, more elegant visual results
Episode 1: https://youtu.be/RKb-dsBhYxw
Episode 2: https://youtu.be/RDIYm79IhZI
Powered by Interactions with GSAP
New
This site uses Interactions with GSAP,
Webflow's next-gen interactions engine.
Webflow's next-gen interactions engine.

