How to Master GSAP Interactions in Webflow — Lesson 10

This masterclass delivers a comprehensive, from-scratch guide to building infinite looping marquees in Webflow. Designed for developers who want to understand the "why" behind their builds, the tutorial avoids superficial instructions in favor of deep structural logic. By exploring layout fundamentals and interaction mechanics, viewers are empowered to master the Webflow platform and elevate their animation skills beyond basic execution.

At the core of this methodology is a robust approach leveraging Flexbox and Webflow's GSAP-powered interactions. The lesson demonstrates how to prevent horizontal scrolling and visual imbalances by intelligently placing overflow: hidden properties at the main container level. To achieve the infinite looping illusion, the instructor introduces the "trail" technique: wrapping marquee elements in a div, duplicating that trail side-by-side, and animating it by exactly -100% of its own width. This mathematically sound strategy ensures the loop never breaks, entirely independent of the number or individual widths of the marquee items.

Ultimately, the viewer achieves the ability to create a highly scalable, flexible, and reusable interaction system. By targeting custom data attributes rather than rigid CSS classes, developers can recycle a single interaction across an entire site. By the end of the video, viewers will have built a foundation capable of easily supporting horizontal, reversed, diagonal, and vertical marquees, fully polished with premium user experiences like smooth hover effects and native pause-on-hover functionality.

• Implement Container-Level Overflow Control: To prevent horizontal scrolling while maintaining visual balance on larger viewports, apply overflow: hidden to the main container rather than the section or body element, ensuring the marquee remains safely constrained within your layout boundaries.
• Utilize the "Trail" Duplication Technique: Ensure a seamless, unbreakable loop by wrapping your marquee items in a "trail" div, duplicating it, and animating the wrapper by -100% of its total width, making the animation independent of individual element dimensions.
• Scale with Attribute-Based Targeting: Break free from rigid class structures by assigning custom attributes (like data-animate="horizontal-marquee") to your target elements. This allows you to apply one universal interaction across entirely different marquees.
• Adapt Layouts with Minimal Effort: Once the foundational logic is established, easily transform a standard horizontal marquee into reversed, diagonal, or vertical variations by applying simple CSS transforms, tweaking flex-direction, and reversing the interaction values.
• Elevate User Experience with Interactive Pausing: Enhance accessibility and engagement by using native GSAP-powered triggers to pause the animation when a user hovers over the marquee, and seamlessly resume it upon mouse leave, tying the behavior to a simple data-marquee-pause attribute.

• 01:07 - Create a section and add a div block container with the class main-container.
• 01:28 - Apply padding to the main-container and set a maximum width, such as 90 REM.
• 01:48 - Add a div block inside the main container and assign it the class section_content-wrapper.
• 02:09 - Create a div block to host the marquee content and give it the class section_marquee.
• 03:28 - Select the marquee images and set their height to 45 VH.
• 04:45 - Set the display property of the section_marquee element to flex.
• 07:11 - Add an is-marquee combo class to the main container to set horizontal padding to zero and apply overflow: hidden.
• 11:50 - Inside the interaction settings, set the animation duration to 40 seconds and ensure the ease is set to linear.
• 15:03 - Set the y-axis flex alignment of the section_marquee to top to prevent the images from distorting.
• 21:06 - Wrap the marquee images inside a new div block and assign it the class section_markey-trail.
• 21:46 - Select the section_markey-trail element and set its display property to flex.
• 22:43 - Change the flex child sizing of the trail element from "shrink if needed" to "don't shrink or grow".
• 24:17 - Update the interaction target to the section_markey-trail and set the X-axis movement to -100%.
• 25:28 - Add a custom attribute named data-animate with the value horizontal-marquee to the section marquee.
• 26:09 - Update the interaction target filter to select the direct children of the element bearing the data-animate custom attribute.
• 28:53 - To reverse the horizontal animation, modify the movement action so it animates from -100% to 0%.
• 29:50 - Apply an is-diagonal combo class to the marquee and apply a rotate transform of -5° around the Z-axis.
• 32:32 - Add 800ms "ease out expo" transitions for the transform and box shadow properties on the marquee images to create a smooth hover effect.
• 33:14 - Add a move transform of -10% on the Y-axis to the hover state of the marquee elements.
• 34:48 - Add a new custom attribute to the marquee elements (data-marquee-pause) to designate them as pause triggers.
• 35:32 - Create a hover interaction using the pause attribute and set the trigger control value to pause.
• 37:25 - Add a mouse leave event trigger targeting the pause attribute and set its control value to resume.
• 39:46 - Add an is-vertical combo class to the marquee and switch the flex direction from horizontal to vertical.
• 41:22 - Set the constrained height of the vertical section_marquee to 100 VH.
• 44:02 - In the vertical interaction settings, replace move X with move Y and set the final value to -100%.
• 45:37 - Reverse the vertical marquee by changing the animation action to move from -100% to its original vertical position.

How to Build Infinite Looping Marquees in Webflow

Step 1: Set Up the Base Layout Boundaries

• Timestamp: 01:07 - 01:28
• How: Create a section and add a div block container inside it, giving it the class main-container. Apply padding to this container (e.g., 8 REM top/bottom, 4 REM left/right) and set a maximum width, such as 90 REM.
• Why: Establishing a main container with a maximum width creates the core structural boundaries for your page and prepares the layout for proper overflow control later on.

Step 2: Add Content Wrappers and Standardize Element Dimensions

• Timestamp: 01:48 - 04:05
• How: Inside the main-container, add a div block named section_content-wrapper, and within that, add another div named section_marquee. Inside the marquee container, place your content (like images) and set their height to 45 VH, then duplicate them until you have the desired amount of items (e.g., nine items).
• Why: These nested wrappers will isolate the marquee's layout and logic from the rest of the site. Standardizing the elements using VH ensures a clean layout where all items scale nicely with the height of the viewport.

Step 3: Align Items Horizontally and Prevent Distortion

• Timestamp: 04:45 & 15:03
• How: Select the section_marquee element and set its display property to flex. Then, set the flex alignment on the Y-axis to top.
• Why: Applying flexbox lines the items up horizontally one after the other, forming the base of the marquee. Setting the Y-axis alignment to top prevents the elements from stretching to fill the container, ensuring they maintain their original aspect ratios without distortion.

Step 4: Apply Proper Overflow Control

• Timestamp: 07:11 - 09:52
• How: Add an is-marquee combo class to the main-container. Using this combo class, set horizontal padding to zero and the overflow property to hidden.
• Why: This prevents horizontal scrolling and ensures the marquee content is clipped exactly at the left and right edges of the main container. Constraining the marquee to the container rather than letting it stretch to the edges of large viewports creates a more visually balanced experience.

Step 5: Implement the "Trail" Duplication Technique

• Timestamp: 21:06 - 21:46
• How: Select all of your images inside the marquee, right-click, and wrap them in a new div block named section_markey-trail. Set the display property of this new trail element to flex to restore the horizontal layout. Finally, duplicate the section_markey-trail element so there are two side-by-side.
• Why: Duplicating the entire sequence of elements ensures that as the first group scrolls out of view, the exact same sequence seamlessly follows it, establishing the foundation of an unbreakable infinite loop.

Step 6: Adjust Flex Sizing for the Trails

• Timestamp: 22:43
• How: Select one of the section_markey-trail elements and change its flex child sizing from "shrink if needed" to "don't shrink or grow".
• Why: This prevents the two duplicated trails from trying to shrink and fit inside their parent flex container, allowing them to freely expand side-by-side without overlapping each other.

Step 7: Build the Core Infinite Loop Interaction

• Timestamp: 11:50 & 24:17
• How: Go to the interactions panel and create a Page Load trigger. Create a "Move" action targeting the section_markey-trail element. Set the duration to 40 seconds, the ease to linear, and animate it on the X-axis to -100%. Set the animation to loop indefinitely.
• Why: Animating the trail wrappers by exactly -100% of their own width ensures that the loop is mathematically perfect and completely independent of the actual number of elements or their individual widths. Setting the ease to linear ensures the marquee moves at a constant speed.

Step 8: Make the Interaction Reusable with Attributes

• Timestamp: 25:28 - 26:09
• How: Add a custom attribute to your section_marquee named data-animate with the value horizontal-marquee. In your interaction settings, change the target from a specific class to "Any Element", filter by "Direct Child of", and target the attribute data-animate="horizontal-marquee".
• Why: This detaches the animation from rigid CSS classes, allowing you to use a single interaction rule across multiple differently-styled marquees site-wide simply by adding the data attribute.

Step 9: Add Smooth Hover Effects (Optional)

• Timestamp: 32:32 - 33:14
• How: Select the elements inside the marquee and add a CSS transition for both transform and box-shadow (e.g., 800ms duration with an ease out expo easing). In the hover state, apply a box shadow and add a move transform of -10% on the Y-axis.
• Why: For interactive elements like links or cards, a smooth lift and drop shadow upon hovering provides crucial tactile feedback and elevates the premium feel of the build.

Step 10: Enable Pause-on-Hover Functionality (Optional)

• Timestamp: 34:48 - 37:25
• How: Add an attribute named data-marquee-pause (noted as data-ar pose in transcript) to the section_marquee element. Create a new Hover interaction using this attribute as the target. Set the hover-in trigger control value to pause, and create a mouse leave trigger setting the control value to resume.
• Why: Adding native pause and resume functionality improves accessibility and user experience, allowing users to easily read content or click links before they scroll away.

Step 11: Create Alternate Configurations (Diagonal, Reversed, and Vertical)

• Timestamp: 28:53, 29:50, 39:46 - 45:37
• How:
  
  • To Reverse: Duplicate the interaction and change the X-axis action to move from -100% to 0%.
  • To go Diagonal: Add an is-diagonal combo class to the marquee and apply a rotate transform of -5° around the Z-axis, along with a -5% move transform on the X-axis.
  • To go Vertical: Add an is-vertical combo class to switch the flex direction of the containers and trails from horizontal to vertical. Constrain the section_marquee height to 100 VH. In the interaction, swap Move X for Move Y and animate to -100%.
• Why: This proves the structural scalability of the setup; minor CSS tweaks and duplicated interactions allow you to radically alter the layout logic without rebuilding the fundamental looping mechanism.

To prevent horizontal scrolling, apply the overflow: hidden property to the main container that wraps your section content. This safely constrains the marquee within your layout boundaries, ensuring it clips exactly at the left and right edges of the container without extending indefinitely across the viewport.

Wrap your marquee items in a "trail" div block, duplicate this wrapper, and place them side-by-side using Flexbox with child sizing set to "don't shrink or grow". Then, animate these trail elements by moving them -100% of their own width on the X-axis so the sequence perfectly repeats regardless of individual element dimensions.

Assign a custom data attribute to the marquee container and use it as the target for a Webflow hover interaction. Set the hover-in trigger's control value to "pause", and add a corresponding mouse leave trigger set to "resume" so the animation restarts automatically when the cursor exits the element.

Instead of duplicating interactions for different class names, assign a custom data attribute (such as data-animate="horizontal-marquee") to your target marquee containers. Inside the interaction panel, set your target filter to apply the animation to any direct child of an element bearing that specific attribute.