Scroll

ScrollSmoother

ScrollSmoother is a GSAP plugin that wraps native scrolling in a smoothing layer, so the page eases toward the scroll position instead of snapping to it. It sits on top of ScrollTrigger, adds momentum-style scroll, and exposes `data-speed` and `data-lag` attributes for parallax without writing any tween code. It's been free since GSAP 3.13 (April 2025), so the old 'Club GSAP only' framing no longer applies.

Updated July 1, 2026

Mechanics

How ScrollSmoother works

ScrollSmoother needs a specific DOM structure: a #smooth-wrapper with a single #smooth-content child holding the whole page. It reads the real scroll position, then transforms the content toward that position over a short window, so a fast flick keeps gliding for a beat instead of stopping dead. It requires ScrollTrigger and has to be registered after it.

smooth-scroll.js

With effects: true, you get parallax straight from markup. data-speed="0.5" scrolls an element at half speed (it drifts up relative to the page), data-speed="1.5" overtakes the scroll, and data-lag="0.3" makes an element trail the scroll by 0.3s before catching up.

example.html
When

Use it for

  • A GSAP-only stack where you already run ScrollTrigger and want smooth scroll without adding a second library
  • Attribute-driven parallax (data-speed) and lag (data-lag) with no per-element tweens
  • Editorial and award-style sites where the momentum-glide is part of the feel
  • Cases where you want ScrollTrigger.refresh() and the smoothing to stay in one dependency's mental model
Alternatives

Use something else when

ScrollSmoother is not the only smooth-scroll layer, and it's not the one we run on Annnimate. The common alternative is Lenis (MIT, from Darkroom Engineering), which smooths window scroll directly with no required #smooth-wrapper structure, ships smaller, and hands scroll frames to whatever you want. It wires into ScrollTrigger in a few lines:

script.js
  • You want smooth scroll on plain window with no wrapper DOM, and a smaller footprint, reach for Lenis
  • You are not using GSAP at all, native CSS scroll-behavior: smooth covers anchor jumps for free
  • You only need scroll-linked animation, not smoothing itself, that's plain ScrollTrigger, no smoother of any kind
  • The visitor has prefers-reduced-motion: reduce, skip the smoothing entirely and let native scroll run

Smoothing is a motion preference too

Momentum scroll can make motion-sensitive users nauseous. prefers-reduced-motion adoption crossed 50% of mobile sites in 2024, up from 34% in 2022 (Web Almanac 2024), so it's the most common preference query you'll hit. Gate the smoother behind a gsap.matchMedia() check and let reduced-motion visitors scroll natively.
In production

Used in these Annnimate components

Annnimate runs Lenis, not ScrollSmoother. Lenis drives window scroll on the marketing pages and the anonymous /animations routes (per our scroll architecture), and every ScrollTrigger-driven component reads from that one source. The components below are built to run under whatever smooth-scroll layer sits above them, so they behave the same whether you pair them with Lenis, ScrollSmoother, or no smoother at all.

  • The Parallax component moves layers at different scroll speeds. Under ScrollSmoother you could express the same thing with data-speed, we drive it through ScrollTrigger so it's smoother-agnostic
  • The Image Dissolve Scroll shader scrubs a dissolve uniform across its section's scroll range, and the smoothing layer just makes that scrub feel less twitchy on a trackpad

Why we picked Lenis

Lenis smooths window directly, so we didn't have to wrap the whole app in #smooth-wrapper / #smooth-content and re-plumb the auth'd (app) tree, which uses a native inner scroller. One smooth layer on the marketing side, native scroll where the app needs it. If your project is GSAP-only and already has the wrapper structure, ScrollSmoother is the lower-friction choice.
Used in components

See it running in production

ParallaxElements move at different speeds as you scroll so the page feels layered, slower in the back and faster up front.Image Dissolve ScrollAn image that breaks apart into random organic patches as you scroll, with a glowing edge along the line where it's dissolving.
FAQ

Common questions

Is ScrollSmoother free now, or still Club GSAP only?
It's free. Webflow acquired GreenSock and made all of GSAP, including ScrollSmoother and the other former Club plugins, 100% free with commercial use as of GSAP 3.13 (fully live April 30 2025). Any tutorial calling it a paid plugin predates that.
ScrollSmoother vs Lenis, which should I use?
If you already run GSAP + ScrollTrigger and want attribute-driven parallax (data-speed, data-lag) in one dependency, ScrollSmoother is the least friction. If you want to smooth window scroll with no required wrapper DOM, a smaller bundle, and framework-agnostic control, Lenis is the common pick, and it's what we use on Annnimate. Both wire into ScrollTrigger cleanly.
Does ScrollSmoother work on mobile?
By default it leaves touch scroll native and only smooths on desktop. Set smoothTouch to a small value like 0.1 if you want a touch of smoothing on mobile, but full smoothing on touch tends to fight the OS scroll and feel wrong. Most production setups leave smoothTouch at 0.
Do my ScrollTrigger animations still work with ScrollSmoother?
Yes. ScrollSmoother is built on ScrollTrigger and updates it automatically, so your existing triggers, pins, and scrubs keep working against the smoothed position. That's the main reason to prefer a GSAP-native smoother over a third-party one if your whole stack is already GSAP.
How do I turn off smoothing for reduced-motion users?
Wrap the ScrollSmoother.create() call in a gsap.matchMedia() block that excludes (prefers-reduced-motion: reduce), so motion-sensitive visitors get native scroll. Same principle applies to Lenis, only start it for users who haven't asked to reduce motion.
PreviousScroll velocityScroll velocity is the speed and direction the user is scrolling, measured in pixels per second, which ScrollTrigger exposes through self.getVelocity() inside its callbacks.NextScrollToPluginScrollToPlugin is a GSAP plugin that animates scroll position, so you can smooth-scroll the window or any scrollable element to a pixel value or a target element with an ease and duration you control.
Related conceptsScrollTriggerScrubPinning