By Mehdi HassanGSAP and Webflow are now the same company, which changed how you add scroll animation to a Webflow site. You no longer paste CDN links and worry about plugin licenses. This guide walks through the setup, the patterns we actually use, and the guardrails that keep scroll effects from hurting speed or accessibility. It sits inside our website animation guide, which covers when motion is worth adding at all.
How do you use GSAP in Webflow in 2026?
You use GSAP in Webflow in one of two ways: visually, through Webflow's GSAP-powered interactions, or in code, by enabling the GSAP integration and writing scripts in custom code. Both run on the same library. The visual route gives you a timeline you can scrub and preview, with built-in ScrollTrigger and SplitText support and reusable animations, at no extra cost according to GSAP's own Webflow documentation.
The code route is for effects the visual timeline can't express: scroll logic that depends on calculated values, animations tied to CMS content in unusual ways, or behavior that responds to custom events. GSAP's documentation describes the integration as loading the core library and any plugins you tick, site-wide. If you only need GSAP on one page, you can instead load it with a script tag in that page's settings.
Approach | Best for | Who can edit it later | Watch out for |
|---|---|---|---|
Webflow GSAP-powered interactions | Reveals, staggers, pinned sections, text splits | Anyone comfortable in the Designer | Complex logic gets hard to read in the panel |
GSAP integration plus custom code | Calculated or conditional scroll logic | A developer | Doesn't run in the Designer canvas |
Script tag on one page | A single heavy effect on one page | A developer | Version drift if pages load different copies |
Our rule: start in the interactions panel, and only drop to code when you hit a wall.
How do you set up ScrollTrigger in Webflow?
Set up ScrollTrigger in Webflow by enabling the GSAP integration, ticking ScrollTrigger, and registering the plugin in your page's custom code before you use it. The steps below follow GSAP's documented Webflow setup. Menu names can move between Webflow releases, so check the current Webflow help center if a label looks different.
Enable the GSAP integration
Open your site settings, find the GSAP integration, and switch it on. This loads the core library across the site.
Tick the plugins you need
Check ScrollTrigger, plus SplitText if you animate headlines by line or word. Leave the rest off so you don't ship code nobody uses.
Add a class or attribute hook
Give the elements you'll animate a dedicated class or a custom data attribute, separate from their styling classes, so a designer renaming a style doesn't break the animation.
Write the script before the closing body tag
In Page settings, under Custom code, add your script in the Before body section. Wrap it in a DOMContentLoaded listener and call gsap.registerPlugin(ScrollTrigger) first.
Publish to staging and test
Custom code doesn't run in the Designer canvas, so publish to your webflow.io staging domain and test there, with ScrollTrigger's markers option on while you tune start and end points.
Remove markers and refresh after layout changes
Turn markers off before going live. If images, fonts or tabs change the page height after load, call ScrollTrigger.refresh() so trigger positions stay accurate.
Which GSAP scroll patterns work best on Webflow sites?
Four GSAP patterns cover most marketing sites: staggered reveals, scrubbed progress, pinned step-by-step sections and split-text headlines. Each has a clear job, and each has a version that goes too far. Use the job to decide, not the reference site that inspired you.
- Staggered reveals. Cards or logos fade and rise in sequence as a section enters. Cheap and easy in the visual panel. Keep the distance small and the stagger short, or the reader waits for content.
- Scrubbed progress. An element's state follows the scrollbar, such as a line drawing along a timeline. Good for showing order. Use scrub with a little smoothing rather than a hard one-to-one link.
- Pinned steps. A section pins while three or four steps animate through, explaining how a product works. Powerful, but keep it short and check it on phones, where long pins feel like the page is stuck.
- Split-text headlines. SplitText animates a heading by line or word. Use it on section headings, not on the hero headline, which should render immediately.
For the hero specifically, see hero section animation patterns, and for small hover and click feedback that doesn't need ScrollTrigger at all, see micro-interactions.
For example, suppose you're building a pinned 'how it works' section
For example, suppose a Webflow homepage has a 'how it works' section with three steps and a product illustration. The illustration pins on the right while the three step blocks scroll past on the left, and each step swaps a highlighted layer in the illustration.
In the interactions panel, you'd create one scroll-linked timeline on the section, pin the illustration wrapper, and add three labels where each layer's opacity changes. On mobile, you'd turn the pin off and stack the three steps with their own small illustration, because side-by-side pinning doesn't fit a narrow screen. In code, the same split is a gsap.matchMedia() block with one setup for wide screens and a simpler one for narrow ones.
How do you keep GSAP scroll animation fast in Webflow?
Keep GSAP fast in Webflow by animating only transform and opacity, loading plugins only where they're used, and keeping the hero static. GSAP itself is efficient, but what you animate decides the cost. Moving an element with x, y or scale stays on the compositor, while animating width, height, margins or box shadows forces layout or paint on every frame.
- Don't fade in the largest element. If the hero headline or image starts invisible, it can delay Largest Contentful Paint. web.dev defines a good LCP as 2.5 seconds or less.
- Watch the main thread. Heavy scroll handlers and long setup scripts can make taps feel slow. web.dev defines a good Interaction to Next Paint as 200 milliseconds or less.
- Scope plugins. If only the homepage uses SplitText, consider loading it from that page's settings instead of site-wide.
- Test on a mid-range phone. A fast laptop hides jank that most of your visitors will feel.
The broader method for diagnosing scroll jank is in scroll animations without killing performance, and the Webflow-specific Core Web Vitals fixes are in Core Web Vitals for Framer, Webflow and Next.js. If you're tempted to add smooth scrolling on top of ScrollTrigger, read our take on Lenis smooth scroll first.
How do you respect reduced motion with GSAP in Webflow?
Respect reduced motion by wrapping your scroll animations in gsap.matchMedia() with a prefers-reduced-motion query, so visitors who ask for less motion get a static, fully readable page. GSAP's matchMedia reverts the animations and their ScrollTriggers automatically when the condition stops matching, which keeps the code short.
In practice, you create one matchMedia context with two conditions: one for no-preference, where the full animation runs, and one for reduce, where elements simply sit in their final state. Don't just shorten durations for reduced motion. Remove the movement and keep, at most, a quick opacity change. For the visual interactions panel, check Webflow's current documentation for how it handles the reduced-motion setting, and test it yourself by turning on reduce motion in your operating system.
One more guardrail: never hide content with CSS and rely on GSAP to reveal it. If the script fails or loads late, content set to opacity zero never appears, which hurts readers and crawlers alike. Set the hidden state from the script itself, with gsap.from() or a set call inside the same block.
When should you use GSAP code instead of Webflow interactions?
Use GSAP code when the animation depends on logic: measured values, conditions, CMS-driven counts or events from other scripts. The visual panel handles timelines, scroll triggers, pins and staggers well, and it keeps the motion editable by designers.
Pros
- Handles calculated and conditional animation the panel can't express
- One script can drive every CMS item the same way
- Full access to GSAP's API, including matchMedia and callbacks
- Easy to version and review if you keep it in a repository
Cons
- Invisible in the Designer, so editors can't preview or change it
- Breaks quietly when someone renames a class or restructures a section
- Needs a developer for every change
- Easy to duplicate if several pages each paste their own copy
If your Webflow site has grown into a pile of page-level scripts nobody owns, that's usually the sign to consolidate. Our Webflow development service includes cleaning up motion like this, and the trade-offs between GSAP and other libraries are covered in GSAP vs Motion vs CSS.
What happens to GSAP animations if you move off Webflow?
GSAP code moves well between platforms, but Webflow's visual interactions don't export as code, so plan to rebuild them. Custom scripts that target classes or attributes can usually be ported to a Next.js or plain HTML site with small changes. Interactions built in the panel live inside Webflow's project data.
If a migration is likely soon, keeping complex choreography in code makes it more portable. We cover what translates in Webflow interactions to Framer.
