All resources
GSAPAnimation

GSAP ScrollSmoother is free now: Oryzo-style scrolling

Inertia scrolling, pinned columns and scrubbed reveals with the GSAP plugins that used to be Club-only.

Monday, October 5, 2026 · 1 min read · by Cyrus Bitangcol

Since GSAP 3.13 every plugin ships in the public gsap package, including ScrollSmoother and SplitText.

Install

bash
npm install gsap @gsap/react

Set up the wrapper

tsx
<div id="smooth-wrapper">
  <div id="smooth-content">{children}</div>
</div>
ts
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
ScrollSmoother.create({ smooth: 1.2, effects: true, smoothTouch: false });

Fixed elements (your header, a WebGL canvas) must live outside the wrapper, or they scroll with the content.

Pin a side column

CSS position: sticky stops working inside the smoothed content, so pin with ScrollTrigger instead:

ts
ScrollTrigger.create({ trigger: grid, start: "top 128px", end: () => `+=${grid.offsetHeight - col.offsetHeight}`, pin: col, pinSpacing: false });