How to Master GSAP Interactions in Webflow — Lesson 9

This instructional session provides a comprehensive guide to building a dynamic "sticky scroll" video interaction—commonly known as a picture-in-picture effect—specifically tailored for long-form web content. By ensuring that an embedded video gently shrinks and follows the user into the bottom right corner of the viewport as they scroll through a blog post, this interaction significantly elevates the user experience and guarantees that visitors remain engaged with critical media content rather than scrolling past it.

Through this tutorial, viewers will master the integration of Webflow’s GSAP-powered scroll interactions, Webflow variables, and advanced CSS math. Instead of relying on rigid, hardcoded animations, the lesson demonstrates an elegant, scalable approach: controlling complex X and Y axis translations and scaling transformations by multiplying custom calc() formulas against a single variable (transform-factor) that seamlessly animates from zero to one. Furthermore, viewers will conquer a common layout challenge associated with sticky positioning by applying precise mathematical margin compensation to prevent the document flow from breaking.

Beyond technical mechanics, this lesson instills high-end development best practices by prioritizing both responsiveness and accessibility. Viewers will learn how to implement conditional playback rules that thoughtfully disable the interaction on tablet and mobile viewports, preventing the sticky video from obstructing vital content. Additionally, the tutorial demonstrates how to respect user preferences by deactivating the animation for those who have "prefers-reduced-motion" enabled, ensuring the final product is as inclusive as it is visually impressive.

• Responsive Wrapper Setup: Utilizing a custom div block with a 16:9 aspect ratio and an embedded iframe set to 100% width and height guarantees that the video will scale perfectly within its designated space while maintaining the correct proportions.
• Combo Class State Management: The cleanest way to initiate the sticky behavior is by toggling a targeted combo class (e.g., is-sticky) that updates multiple properties simultaneously: setting position to sticky, top to 0, and assigning a high z-index (such as 100).
• Variable-Driven GSAP Transformations: You can smoothly control multiple complex CSS transformations—translating the element across the viewport while scaling it down to 40%—by multiplying precise calc() expressions by a single Webflow variable that animates from 0 to 1.
• Mathematical Layout Compensation: To prevent the newly introduced Y-axis translations from overlapping or misaligning the subsequent page content, developers must apply a highly specific calc() formula to the video wrapper's bottom margin, and then counter that with an inverse negative top margin on the sibling element below it.
• Context-Aware Conditional Playback: To ensure usability across all devices and user needs, conditional playback rules should be employed to disable the scroll interactions entirely on tablet-and-below breakpoints, as well as for visitors who have native "prefers-reduced-motion" settings activated.

• 01:21 - Setting the video wrapper's maximum width, auto horizontal margin, and 16:9 aspect ratio to maintain scaling proportions.
• 02:13 - Setting the embed element's width and height to 100% so the iframe expands fully into the 16:9 wrapper.
• 04:47 - Setting the video wrapper's transform origin to the top right corner to ensure the scale animation shrinks toward the correct focal point.
• 06:38 - Creating a new scroll interaction utilizing Webflow's GSAP-powered interactions panel.
• 09:17 - Switching the interaction setup from continuous "scrub on scroll" to "trigger actions".
• 09:50 - Configuring the interaction controls to "play" on the "leave" trigger and "reverse" on the "enter back" trigger.
• 10:30 - Setting both values of the interaction's end threshold to "top" so it triggers when the top of the wrapper hits the top of the viewport.
• 13:25 - Creating the is-sticky combo class.
• 13:44 - Applying position: sticky, top: 0, and z-index: 100 to the is-sticky combo class.
• 15:43 - Adding a custom CSS property to apply a custom translate x calc() expression.
• 16:56 - Appending a scale(0.4) transformation to the custom CSS transform property.
• 18:16 - Inserting a translate y calc() expression sequentially between the X translation and scale functions.
• 21:07 - Creating a Webflow number variable named transform factor with a default starting value of zero.
• 21:48 - Multiplying the translate x and translate y calc() expressions by the transform factor variable so the value dynamically outputs based on the variable's state.
• 23:09 - Modifying the scale expression to calc(1 - 0.6 * transform factor) to smoothly animate the element from a scale of 1 down to 0.4.
• 24:34 - Adding a "Set" action to the interaction to cleanly toggle the is-sticky combo class.
• 25:30 - Adding an "Animate variable" action to transition the transform factor variable from 0 to 1 over 0.3 seconds.
• 31:05 - Applying a calculated math formula to the video wrapper's bottom margin to compensate for the introduced Y-axis layout disruption.
• 31:26 - Applying an inverse negative top margin to the sibling element below the wrapper to realign the document flow.
• 33:13 - Adding a conditional playback rule to set "no animation" for tablet breakpoints and below.
• 33:50 - Adding a conditional playback rule to disable the interaction entirely for users with native "prefers reduced motion" enabled.

Building a Sticky Scroll Video Interaction in Webflow

Step 1: Set Up the Video Wrapper and Iframe Embed (01:21 - 03:28)

• How: Apply a maximum width, an auto horizontal margin, and a 16:9 aspect ratio to your video wrapper div. Place a native Webflow embed element inside it and set both its width and height to 100%. Finally, modify the actual iframe code block inside the embed to also have width="100%" and height="100%".
• Why: The 16:9 aspect ratio dictates the correct viewing proportions for the wrapper. Setting the embed element and iframe to 100% forces the video to expand fluidly to fill this pre-defined container without relying on rigid, hardcoded pixel dimensions.

Step 2: Configure the Transform Origin (04:47 - 05:05)

• How: Select the video wrapper and set its Transform Origin to the top right corner.
• Why: Later in the interaction, the video wrapper will be scaled down. Adjusting the transform origin ensures the entire element visually shrinks toward the correct focal point (the top right), resulting in a transition that feels much smoother and naturally integrated.

Step 3: Create and Configure the Scroll Interaction (06:38 - 11:07)

• How: With the video wrapper selected, open the interactions panel, choose 'Interactions with GSAP', and create a new Scroll interaction. Change the interaction mode from 'Scrub on scroll' to 'Trigger actions'. Set the 'Leave' control to 'Play', and the 'Enter back' control to 'Reverse'. Finally, set both values of the End Threshold to 'top'.
• Why: Switching to 'Trigger actions' changes this from a continuous scroll animation into a discrete state change. Setting the end threshold to 'top' ensures that the sticky behavior and transformations fire exactly when the top of the video wrapper reaches the top edge of the viewport, and perfectly reverses when it re-enters.

Step 4: Create the Sticky State Combo Class (13:25 - 14:38)

• How: Temporarily add a new combo class named is-sticky to the video wrapper. Apply position: sticky, top: 0, and a z-index of 100 to this class. After creating it, remove the class from the wrapper but keep a dummy element with the class applied in your style guide to prevent Webflow from deleting it.
• Why: Toggling a single combo class is the cleanest way to simultaneously update all the properties necessary for a functional sticky element. The top offset makes the sticky position active, and the high z-index ensures the video stays layered above all subsequent page content.

Step 5: Apply Custom CSS Transform Math (15:43 - 18:39)

• How: Scroll to the bottom of the style panel and add a custom property named transform. Write three sequential values:
  1. translate x(calc(50vw - 50% - 2rem)).
  2. translate y(calc(100vh - 40% - 2rem)).
  3. scale(0.4). Ensure the Y translation sits exactly between the X translation and the scale function.
• Why: The translate x formula pushes the video half the viewport width, pulls it back by half its own width, and subtracts a 2rem page padding to align it to the right edge. The scale shrinks the video down to 40%. The translate y pushes the video down the full viewport height (100vh), pulls it back up by its newly scaled height (40%), and matches the 2rem padding. Ordering translation before scaling is mathematically necessary to make the motion behave properly.

Step 6: Introduce a Webflow Variable for Dynamic Animation (21:07 - 23:59)

• How: Create a new Number variable named transform factor with a default value of 0. Return to your custom transform property on the wrapper and inject this variable into the formulas:
  • Wrap the translate x and translate y calc expressions in parenthesis and multiply them by the transform factor variable.
  • Rewrite the scale expression to: scale(calc(1 - 0.6 * [transform factor])).
• Why: This approach elegantly ties complex multi-axis transformations to a single value. When the variable animates from 0 to 1, the X and Y translations gradually increase from zero to their fully calculated final positions. Simultaneously, the scale calculation shifts smoothly from 1 (original size) down to 0.4.

Step 7: Build the Interaction Actions (24:34 - 26:10)

• How: Open your GSAP scroll interaction. Add a 'Set' action, target the video wrapper, set the property to 'Class', set the type to 'Toggle', and choose the is-sticky class. Then, add an 'Animate variable' action targeting the transform factor. Configure it with a 0.3s duration, a start value of 0, 'Sine in out' easing, and a target value of 1.
• Why: The 'Set' action correctly activates the sticky tracking state when the trigger fires. The 'Animate variable' action smoothly drives the custom CSS transformations (X, Y, and Scale) across the defined timeline by shifting the multiplier variable from 0 to 1.

Step 8: Implement Layout Compensation via Margins (31:05 - 31:46)

• How: Add a custom value to the video wrapper's bottom margin using this exact formula: calc(100vh - 768px * 0.5625 - 2rem). Next, select the sibling element directly beneath the video wrapper and give it an inverse top margin of calc(-1 * (100vh - 768px * 0.5625 - 2rem)).
• Why: Introducing significant vertical movement (translate y) to a sticky element disrupts the natural document flow and causes layout overlap. The calculated bottom margin mathematically creates just enough physical space to push the surrounding elements up and compensate for the extra movement. Applying the exact inverse negative top margin to the sibling element pulls the subsequent content back into a pixel-perfect layout alignment.

Step 9: Enforce Accessibility and Responsiveness (33:13 - 34:07)

• How: Open the interaction settings and add a Conditional playback rule. Select 'Breakpoint', choose from Tablet downward, and set the behavior to 'No animation'. Add a second rule for 'Prefers reduced motion' and also set it to 'No animation'.
• Why: A video pinned to the bottom of the viewport on narrow screens (tablets and mobile) would obstruct crucial reading material, making it poor UX to leave the animation enabled. Furthermore, accessibility best practices dictate that whenever motion is non-essential, you must disable the animation for users whose operating systems are flagged for reduced motion preferences.

To create a video that shrinks to the corner while scrolling, toggle a combo class applying position: sticky, top: 0, and a high z-index when the video begins leaving the viewport. Simultaneously, leverage a Webflow number variable to smoothly multiply and animate the video's scale, translate-x, and translate-y CSS math properties.

Wrap the native embed element in a div block with a 16:9 aspect ratio and a set maximum width. Then, apply a width and height of 100% to both the Webflow embed element and the custom iframe code itself so the video gracefully expands into the proportional wrapper.

Animating a sticky element along the Y-axis introduces vertical shifts that can cause it to misalign or overlap the subsequent page content. To cleanly compensate for this shift without breaking the document flow, apply a calculated positive bottom margin to the animated element, and an exact inverse negative top margin to the sibling element beneath it.

You can prevent complex scroll interactions from obstructing narrow viewports by adding a conditional playback rule in the interaction settings and setting the behavior to "no animation" for tablet breakpoints and below. For accessibility, you can add an additional "prefers reduced motion" condition to disable the animation entirely for users who have requested minimal motion on their devices.