Libraries / L04 · Library · Scroll & sequence
Lenis, GSAP ScrollTrigger and Next.js App Router wired correctly once
Loading the demo.
pnpm add @quartifex/spineNot on npm yet: the first release is pending. The quickstart, API table, browser support and limitations are in the README.
Lenis is smoothing this whole page now, driven by GSAP's ticker; ScrollTrigger hears every Lenis scroll. Resize the window or rotate a phone and one refresh is logged; mobile toolbar movement logs nothing. Leave the tab for more than a second and come back: a "wake" refresh is logged.
Pinned scene · route ?scene=a
Scroll on: this panel stays pinned while the section passes under it.
// app/layout.tsx
<SpineProvider gsap={gsap} ScrollTrigger={ScrollTrigger} Lenis={Lenis} plumb={plumb}>
<SpineRouteSync />
{children}
</SpineProvider>
// any component
useSpineScope(() => {
ScrollTrigger.create({ trigger: ref.current, pin: true, end: "+=200%" });
}, []);