Webflow's GSAP Interactions engine (launched summer 2025) replaces Classic Interactions on new sites and adds SplitText for per-character text animation, built-in Staggered motion, Animate Variable for design token tweening, Repetition (infinite loops with yoyo), and ScrollTrigger. Access it the same way as Classic — Interactions panel (H) — but with a different trigger/action set. Classic and GSAP can coexist on the same site but each loads a separate JavaScript runtime.
Webflow GSAP Animations: SplitText, Staggers, ScrollTrigger, and the New Engine
Webflow's GSAP-powered Interactions engine is the default on all new sites created after summer 2025. It is a significant upgrade from Classic Interactions: text can be split into individual characters, words, or lines for per-element stagger animations; scroll triggers are more precise with pin and scrub support; design variables can be animated with tweening; and loops use a true Repetition control with yoyo. This tutorial introduces each new capability with complete recipes, explains the GSAP vs Classic architecture decision, and shows how to migrate specific patterns from Classic to GSAP.
Prerequisites
- A Webflow project open in the Designer — GSAP Interactions is the default on sites created after summer 2025
- Paid site plan for publishing interactions
- Familiarity with Classic Interactions concepts (triggers, actions, timelines) is helpful but not required
Step-by-step guide
Verify and enable GSAP Interactions on your site
Verify and enable GSAP Interactions on your site
Open the Interactions panel (H) by clicking the lightning bolt icon in the right sidebar. At the top of the panel, look for the engine selector — it shows either 'Classic' or 'GSAP'. On sites created after summer 2025, GSAP is the default. On older sites, you can switch between engines per interaction, but note: using both Classic and GSAP on the same site loads two separate JavaScript runtimes (GSAP library + legacy Webflow.js Interactions), which has a performance cost. For new projects, use GSAP exclusively. For existing sites with many Classic interactions, migrating to GSAP incrementally is acceptable but audit the performance trade-off.
Expected result: Interactions panel shows GSAP as the engine. New triggers and actions in the panel include Split Text, Animate Variable, Repetition, and enhanced Staggered motion.
Create a headline text reveal with Split Text
Create a headline text reveal with Split Text
Select a heading element on your page. Go to Interactions panel (H) → Element triggers → '+ Add trigger' → 'Scroll Into View'. In the animation timeline, click '+' to add an action. In GSAP, you will see a 'Split Text' action type — select it. Configure: Split by 'Words'. Initial state: Opacity 0, Move Y 20px. Final state: Opacity 1, Move Y 0px. Duration 0.5s. Easing 'Ease Out'. Then in the Staggered motion section that appears below, enable Staggered motion and set Delay to 0.05s. This means each word fades in 0.05s after the previous one, creating a flowing left-to-right text reveal. Set 'Play once' in the trigger options.
Expected result: When the heading scrolls into view, each word fades in and rises from below in sequence, with 0.05s between each word — like a typewriter effect but smoother.
Build a card list stagger with built-in Staggered motion
Build a card list stagger with built-in Staggered motion
Select a parent Div Block containing a row of cards (e.g., a Flex container with 3 child card divs). Go to Interactions panel (H) → Element triggers → '+' → 'Scroll Into View'. In GSAP's animation timeline, click '+' → Animation action. Set target to 'Descendants' and refine by class 'card' (or your card class). Configure From state: Opacity 0, Move Y 40px; To state: Opacity 1, Move Y 0px. Duration 0.6s, Ease Out. Enable Staggered motion: Delay 0.15s, Order 'Left to Right' (or 'From Center'). Set 'Play once'. This single interaction on the parent container staggers all child cards without any per-card setup.
Expected result: Cards fade in from below in a left-to-right cascade with 0.15s between each, triggered once when the container scrolls into view.
Create a scroll-scrubbed pin animation with ScrollTrigger
Create a scroll-scrubbed pin animation with ScrollTrigger
Select a section element. Go to Interactions panel (H) → Element triggers → '+' → 'While Scrolling In View'. In GSAP this trigger includes a 'Pin' option — enable it. Pinning keeps the section fixed in the viewport while the scroll continues, creating a 'sticky' section that animates on scroll. Inside the pinned section, select a child element (e.g., a text block) and add a ScrollTrigger animation: at 0% — Opacity 0, Move X -100px; at 100% — Opacity 1, Move X 0px. The element slides in while the section is pinned and the user scrolls through the pin duration. Set the Scrub option to smooth the animation to exactly match scroll position.
Expected result: The section pins in place while the user scrolls, content animates in as the user scrolls through the pin zone, then the section unpins and the rest of the page continues.
Build an infinite looping marquee with Repetition
Build an infinite looping marquee with Repetition
Create a Div Block class 'marquee-wrap' with Overflow Hidden and Display Flex. Inside, add a Div Block class 'marquee-track' with Display Flex, Gap 32px, containing your logo/text items. Duplicate the marquee-track so you have two identical rows (this creates the seamless loop). Select 'marquee-track'. Go to Interactions panel (H) → Page triggers → '+' → 'Page Load'. In GSAP timeline, add an Animation action: Move X from 0px to -100% (or to the exact negative pixel width of one track). Duration 8s, Easing Linear. In the Repetition section, set to 'Infinite'. Enable Yoyo: No (marquee should always go in one direction — yoyo would reverse it). This creates a seamless infinite scroll ticker.
Expected result: The marquee scrolls infinitely from right to left at a constant speed, creating a seamless ticker with brand logos or text.
Animate a design variable with Animate Variable
Animate a design variable with Animate Variable
Go to Site Settings → Variables and create a Color Variable named 'hero-bg' with a default value of your brand blue. Apply this variable as the background color of your hero section. Now go to Interactions panel (H) → Page triggers → '+' → 'Page Scrolled'. In GSAP timeline, click '+' → 'Animate Variable' action. Select 'hero-bg'. Set the color at 0% scroll to your brand blue and at 50% scroll to a complementary darker shade. This animates the actual design variable — every element on the page bound to 'hero-bg' will shift color as the user scrolls. This is a powerful technique for building scroll-driven theme transitions.
Expected result: As the user scrolls, the hero section background color transitions through the color range, with any other elements bound to the same variable changing in sync.
Compare GSAP vs Classic: when to use each
Compare GSAP vs Classic: when to use each
Classic Interactions (Interactions 2.0): use for sites built before summer 2025, simple toggle interactions (the Mouse Click (Tap) toggle pattern works identically in both engines), or situations where loading only the legacy Webflow.js runtime is preferred. GSAP Interactions: use for new projects, any animation involving SplitText, staggers on dynamic CMS lists, infinite loops, scroll-pinning, or variable tweening. Key difference in trigger scope: Classic uses 'Class' and 'Affect Different Element' selectors; GSAP uses 'Same as trigger target', 'First ancestor', 'Descendants', and 'Next sibling' with class refinement — more granular targeting without needing 'Limit to nested elements' workarounds.
Expected result: Clear understanding of which engine to use for each animation type, and confidence that enabling GSAP on new projects is the right default choice.
Complete working example
1// For custom GSAP code that extends Webflow's GSAP integration2// Add to Page Settings > Before </body> Code3// Note: Webflow loads GSAP automatically when GSAP Interactions are enabled4// You do NOT need to import GSAP manually — it is already available as window.gsap56// Example: Custom GSAP timeline with ScrollTrigger beyond what Webflow's UI exposes7// Only use this for effects not available in the Interactions panel89// Wait for Webflow to initialise first10window.Webflow = window.Webflow || [];11window.Webflow.push(function() {12 // GSAP and ScrollTrigger are available via window.gsap and window.ScrollTrigger13 // when Webflow GSAP Interactions are active on the site1415 // Example: Pin a section and create a custom scrubbed timeline16 var tl = window.gsap.timeline({17 scrollTrigger: {18 trigger: '.custom-pin-section',19 start: 'top top',20 end: '+=600',21 scrub: 1,22 pin: true23 }24 });2526 tl.from('.custom-headline', { opacity: 0, y: 60, duration: 1 })27 .from('.custom-subtext', { opacity: 0, y: 40, duration: 0.8 }, '-=0.4');28});2930// IMPORTANT: Only use this approach for effects the visual Interactions panel31// cannot achieve. Mixing UI-created and code-created GSAP timelines on the32// same elements can cause conflicts.Common mistakes
Why it's a problem: Split Text animation cuts letters mid-render — characters appear with visible gaps or overlap
How to avoid: Split Text temporarily wraps each character/word/line in a span element at animation start. If the element has inherited overflow: hidden from a parent, these spans get clipped. Select all parent containers → Style Panel → Size → Overflow → ensure they are set to Visible (or Auto), not Hidden. If you need overflow hidden elsewhere on the page, use a specific parent wrapper for the Split Text element.
Why it's a problem: GSAP interactions appear in the Interactions panel UI but do not play on the live site
How to avoid: Classic Interactions require Webflow.js; GSAP Interactions require the GSAP runtime to be loaded. Go to Project Settings → Integrations and confirm 'GSAP Interactions' is enabled. On sites that had Classic Interactions first, GSAP may not be automatically enabled. Also check that the site plan is paid — interaction runtime scripts are not included on the free Starter plan for published sites.
Why it's a problem: Infinite loop animation (Repetition: Infinite) stutters or has a visible jump at the repeat point
How to avoid: The animation end state does not cleanly reset to the start state. For a marquee: the Move X end value must equal exactly the negative width of one content track, and you need two identical content tracks so the loop is seamless. For other loops: the last keyframe's property value must smoothly transition back to the first keyframe's value. Enable 'Yoyo' if the animation should reverse rather than jump back to start.
Why it's a problem: Scroll pin section causes page to feel stuck or prevents scrolling past it on mobile
How to avoid: GSAP's pinned sections require the user to scroll through the pin duration before the rest of the page continues. On mobile, touch momentum can conflict with pin hold. Set the section height (which controls pin duration) conservatively — a 200vh or 300vh pin is usually sufficient. Also check that the trigger element has a defined height; pinning an element with Height Auto can cause unpredictable scroll distance calculations.
Best practices
- Use GSAP Interactions for all new Webflow projects — it is the default engine with a richer feature set
- Avoid mixing Classic and GSAP interactions on the same site unless necessary — each engine loads its own JS runtime
- Use Split Text sparingly: per-character animation is striking on hero words but exhausting on body paragraphs
- Set Repetition animations (loops) to begin on Page Load, not Scroll Into View — a loader or marquee that only starts when it scrolls into view is unexpected to users
- When using Animate Variable, apply the variable to all elements that should change together — this is more maintainable than animating individual element colors independently
- Test GSAP ScrollTrigger pin effects on mobile — pinned sections can cause scroll lock issues on iOS Safari
- Use GSAP's built-in Staggered motion on parent containers targeting descendants by class — this is significantly easier than Classic's per-element delay approach for CMS collection lists
- Disable GSAP-heavy animations on mobile via the Interactions panel breakpoint checkboxes — GSAP is GPU-accelerated but complex timelines still stress mobile processors
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Webflow site using the new GSAP Interactions engine (launched summer 2025). I want to: 1) create a hero heading where each word fades in from below with a 0.05s stagger using Split Text, 2) build a card grid where all cards cascade in when the grid section scrolls into view using Staggered motion, and 3) create an infinite looping logo marquee using Repetition. Walk me through the GSAP-specific settings for each — including Split by, Staggered motion order options, and the Repetition yoyo setting.
Using Webflow GSAP Interactions: add a Scroll Into View trigger on the hero heading. Use Split Text action, split by Words, From: Opacity 0 Move Y 20px, To: Opacity 1 Move Y 0px, 0.5s Ease Out, Staggered motion 0.05s. Add a second interaction on the card grid parent: Scroll Into View, target Descendants by class 'card', From: Opacity 0 Move Y 40px, To: Opacity 1 Move Y 0px, 0.6s Ease Out, Staggered motion 0.15s Left-to-Right order.
Frequently asked questions
Does switching to GSAP Interactions break my existing Classic Interactions?
No. Enabling GSAP Interactions does not remove or break existing Classic Interactions on your site. Both engines can coexist. The practical concern is performance: each engine loads a separate JavaScript runtime, so a site running both Classic and GSAP interactions adds extra KB and initialisation time. For existing sites, there is no urgency to migrate Classic interactions to GSAP unless you specifically need GSAP features like Split Text or Animate Variable. For new projects, use GSAP exclusively.
Is the GSAP version in Webflow the full GreenSock library?
Webflow's GSAP Interactions uses a licensed version of the GSAP library with access to core GSAP, ScrollTrigger, and SplitText plugins — the same plugins that are paid plugins in the standard GSAP license. Because Webflow has a site-wide GSAP license, any site using Webflow's GSAP Interactions can use SplitText without needing an individual GSAP Club membership. If you write custom GSAP code via Page Settings scripts, you access this same pre-loaded library via window.gsap.
What is the difference between GSAP Staggered motion and Classic Interactions' manual delay approach?
In Classic Interactions, stagger is achieved by duplicating the animation action for each element and manually adding increasing delays (0s, 0.15s, 0.3s, etc.) — one action per element. This is tedious for more than 3 items and breaks for CMS collection lists where the item count is dynamic. GSAP's Staggered motion is a single setting on the parent container: specify the delay between children and GSAP automatically calculates delays for however many children exist. This works perfectly with CMS collection lists regardless of item count.
Can I use GSAP code I write myself alongside Webflow's GSAP Interactions panel?
Yes, with caution. Webflow loads GSAP before Webflow.js initialises, so you can access window.gsap in a Webflow.push() callback in your Page Settings Before body tag code. The key rule is: do not apply custom GSAP animations to the same element that has a Webflow GSAP Interaction — they will conflict and produce unpredictable results. Use the Interactions panel for standard effects and reserve custom GSAP code for effects the panel cannot achieve (advanced SVG morphing, custom easing curves, complex timelines).
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation