How to Master GSAP Interactions in Webflow — Lesson 5

This advanced tutorial from SupaSaito guides Webflow designers through the critical interaction settings of the GSAP-powered animation engine: Repeat, Runs On, and Conditional Playback. Moving beyond basic animation construction, the lesson utilizes four distinct practical patterns—ranging from classic infinite marquees to complex scroll-triggered sequences—to deconstruct the logic behind continuous and conditional motion. The core objective is to transition the viewer from simply applying animations to deeply understanding the architectural decisions that dictate how animations behave, loop, and integrate with the site structure.

The video places a strong emphasis on the granular control available through the "Repeat" property, specifically distinguishing between applying it at the interaction level versus the action level. Through detailed case studies, such as a split-text vertical loop and a multi-state button animation, the instructor demonstrates how to synchronize complex timelines or isolate specific elements for infinite looping while others remain finite. This distinction is paramount for preventing desynchronization in multi-step animations and achieving sophisticated, polished effects that standard settings cannot produce.

By the conclusion of this chapter, viewers will be equipped to build not only visually stunning interactions but also highly performant and accessible web experiences. The lesson provides actionable strategies for using "Runs On" to optimize JavaScript execution across large sites and "Conditional Playback" to respect user accessibility preferences regarding reduced motion. Mastering these settings ensures that designers can deliver professional-grade animations that remain robust across various devices and responsive breakpoints.

• Distinction Between Repeat Contexts: Understanding when to apply "Repeat" to the entire interaction versus a single action is crucial. Interaction-level repetition is required to keep multiple actions (like a split-text sequence) synchronized as a group, whereas action-level repetition allows for independent behaviors, such as one element pulsing infinitely while another executes a finite sequence.
• Structural Setup for Seamless Looping: For infinite marquees, proper CSS structure is as important as the animation itself. Using Flexbox with the specific child sizing setting of "Don't shrink or grow" ensures that identical element groups retain their natural width, preventing layout compression and ensuring a perfect, seamless loop.
• Hybrid Animation Logic: You can orchestrate complex scroll interactions where different elements adhere to different time constraints within the same trigger. By utilizing the "Repeat" count combined with "Back and Forth" at the action level, you can program specific elements (like text) to enter and exit a set number of times before settling, while other elements (like a background shape) loop indefinitely.
• Performance Optimization via "Runs On": To maintain a high-performing site, avoid the default setting of running interactions on all pages. explicitely configuring the "Runs On" setting to target specific pages reduces unnecessary JavaScript execution and overhead, particularly for heavy animations that only appear on unique landing pages.
• Accessibility and Responsive Control: The "Conditional Playback" setting is essential for modern, inclusive web design. It allows designers to automatically disable or simplify animations for users who have enabled "prefers-reduced-motion" on their OS, and provides control to disable complex scroll interactions on mobile breakpoints where they may degrade the user experience.

• 02:47 – Set Overflow to Hidden on the marquee wrapper to prevent horizontal scrollbars.
• 06:52 – Set Flex Child Sizing to "Don't shrink or grow" to prevent identical groups from compressing within the flex container.
• 09:25 – Select Interactions with GSAP from the dropdown at the bottom of the interactions panel.
• 10:43 – Set Easing to None to ensure linear, constant speed for infinite scrolling effects.
• 11:34 – Set Repeat to Infinite at the Interaction Level to loop the entire timeline endlessly.
• 15:47 – Enable Split Text by "Letter" to animate characters individually rather than as a block.
• 15:59 – Enable Stagger with an offset time of 0.1s to create a cascading animation effect.
• 17:17 – Change Action Type to From To (e.g., Y: -100% to 0%) to animate elements falling in from a specific position.
• 26:28 – Set scroll animation mode to Trigger Actions (not "Scrub on Scroll") to play the animation once the trigger point is reached.
• 30:25 – Set Repeat count to 3 and enable Back and Forth at the Action Level to create a finite loop sequence (e.g., out-in-out-in).
• 36:04 – Configure Runs On to target specific pages, preventing unnecessary JavaScript execution on the rest of the site.
• 37:26 – Configure Conditional Playback to disable or modify animations when the user has enabled "Prefers Reduced Motion".

Tutorial: Mastering Webflow GSAP Interaction Settings

Focus: Looping Logic, Performance Optimization, and Accessibility Controls

This guide breaks down the architectural decisions behind GSAP interactions in Webflow, moving from infinite marquees to complex hybrid scroll triggers.

Part 1: Infinite Marquee Structure & Logic

1. Configure Container Overflow

Ref: [02:47]

• How: Select the marquee wrapper (or section container) and set Overflow to Hidden.
• Why: This prevents horizontal scrollbars from appearing when the animated content moves outside the viewport boundaries during the loop.

2. Duplicate Content Groups

Ref: [03:49]

• How: Create two identical groups of content (e.g., section_markey-list) inside your flex wrapper.
• Why: To create a seamless loop. When the first group moves completely off-screen (-100%), the second group must immediately occupy that space. When the animation resets to 0%, the switch is invisible to the user.

3. Set Flex Child Sizing

Ref: [06:52]

• How: Select your content groups and set Flex Child Sizing to "Don't shrink or grow".
• Why: By default, Flexbox tries to compress elements to fit the parent ("Shrink if needed"). This setting forces the groups to retain their natural width, ensuring the layout doesn't collapse or distort during the animation.

4. Configure Linear Movement

Ref: [10:43]

• How: In the interaction timeline, set the Easing to None (Linear) for the movement action.
• Why: Infinite scrolling requires a constant speed. Any acceleration or deceleration (easing) will make the loop feel jerky and ruin the illusion of continuous movement.

5. Apply Interaction-Level Repeat

Ref: [11:34]

• How: In the Interaction Settings panel (not the action settings), set Repeat to Infinite.
• Why: This loops the entire timeline endlessly. While action-level repeat works for single actions, interaction-level is the standard practice for keeping the timeline unified.

Part 2: Synchronized Split-Text Loops

6. Setup Staggered Animation

Ref: [15:47] - [15:59]

• How: Select the text element, enable Split Text (by Letter), and enable Stagger with an offset time (e.g., 0.1s).
• Why: This breaks the text block into individual characters, allowing them to cascade out of view one by one rather than moving as a solid block.

7. Use "From To" for Re-entry

Ref: [17:17]

• How: For the action bringing the text back in, change the Action Type to From To. Set the "From" value to 100% (above) and the "To" value to 0%.
• Why: Simply reversing the exit animation would make the text fly back up. "From To" allows you to teleport the text to the top (100%) instantly and animate it falling down into place, creating a continuous "waterfall" loop.

8. Synchronization via Interaction-Level Repeat

Ref: [19:29] - [20:31]

• How: Ensure Repeat: Infinite is checked on the Interaction level, and unchecked on individual actions.
• Why: This timeline contains four distinct actions (Text Out, Arrow Out, Text In, Arrow In). If you repeat individual actions, they will desynchronize immediately. Repeating the Interaction ensures the full sequence completes before restarting as a group.

Part 3: Complex Scroll Triggers (Hybrid Logic)

9. Set Trigger Type to "Trigger Actions"

Ref: [26:28]

• How: In the scroll interaction settings, select Trigger Actions rather than "Scrub on Scroll".
• Why: We want the animation to play automatically once the user reaches a specific point, rather than tying the playback progress to the scrollbar position.

10. Create Finite Loops (Action-Level)

Ref: [30:25] - [31:36]

• How: Select the specific action (e.g., Text Stagger). Set Repeat to 3 and enable Back and Forth.
• Why: This creates a specific, countable sequence: Out → In → Out → In → Return. It allows an element to animate a few times to grab attention and then settle permanently.

11. Create Infinite Pulse (Action-Level)

Ref: [31:48] - [32:57]

• How: On a different action within the same timeline (e.g., Circle Scaling), set Repeat to Infinite and enable Back and Forth.
• Why: This allows the background circle to pulse forever while the text (configured in step 10) stops after its finite loop. This hybrid behavior is only possible by using Action-Level Repeat.

Part 4: Performance & Accessibility

12. Optimize JavaScript with "Runs On"

Ref: [36:04] - [37:18]

• How: Use the Runs On dropdown to select specific pages (e.g., "Home" only) instead of "All Pages".
• Why: This prevents Webflow from loading interaction scripts and checking for targets on pages where they don't exist, reducing unnecessary overhead and improving site performance.

13. Configure Conditional Playback (Reduced Motion)

Ref: [37:26] - [38:54]

• How: Enable Conditional Playback and define behavior for "When Start" if Prefers Reduced Motion is enabled (e.g., set to "Disable interaction").
• Why: This respects the user's OS accessibility settings. Users with vestibular disorders may experience nausea from parallax or looping motion; this setting automatically protects them without requiring custom code.

14. Responsive Control via Breakpoints

Ref: [39:12] - [40:09]

• How: In Conditional Playback, uncheck mobile breakpoints (Phone/Tablet) for heavy scroll interactions.
• Why: Complex scroll animations often degrade UX on small screens and consume battery on older devices. Disabling them on mobile ensures a cleaner, more performant experience on handheld devices.

Ensure your flex container's child elements are set to "Don't shrink or grow" so they retain their natural width regardless of the parent container's size. Duplicate the content group to fill the gap, and use a linear easing curve on the movement action to prevent speed changes during the loop.

Apply repeat to the interaction when you need to loop a full timeline of multiple synchronized actions, such as a split-text sequence. Use repeat on the action only when a specific element needs to loop independently (like a pulsing button) while other elements in the sequence remain static.

In the specific action's settings, set the Repeat count to 3 and enable Back and Forth to create a specific number of out-and-in cycles. This allows the animation to run a finite loop upon the scroll trigger and then settle in its final state without looping endlessly.

Ensure your flex container's child elements are set to "Don't shrink or grow" so they retain their natural width regardless of the parent container's size. Duplicate the content group to fill the gap, and use a linear easing curve on the movement action to prevent speed changes during the loop.