Mastering GSAP Interactions in Webflow – Part 5: Repeat, Runs On & Conditional Playback Explained

In this lesson, we explore one of the core pillars of Webflow’s GSAP-powered system: the Interaction Settings.
- Repeat
- Runs On
- Conditional Playback
Through four practical, real-world examples, we’ll break down how these settings behave, when to use each one, and how they can dramatically improve both the performance and accessibility of your animations.
You’ll learn how to:
✅ Build a fully responsive infinite marquee using interaction-level Repeat
✅ Create a looping stagger animation triggered on page load
✅ Loop only part of a scroll-triggered sequence using action-level Repeat
✅ Combine Infinite + Back and Forth to build elegant hover micro-interactions
✅ Optimize performance by choosing where interactions run
✅ Improve accessibility with prefers-reduced-motion behavior
✅ Understand the difference between interaction-level and action-level Repeat
✅ Design animations that are more modular, maintainable, and intentional
👉 Watch on YouTube: https://youtu.be/Su_-In44SI0
Powered by Interactions with GSAP
New
This site uses Interactions with GSAP,
Webflow's next-gen interactions engine.
Webflow's next-gen interactions engine.


