Find it. Tune it. Paste it.

121 GSAP components, each with a live preview, settings you can change and code in React, Vue and HTML.

Get access
  1. 01.

    Find it

    121 components in 7 categories, and a new one every week.

  2. 02.

    Tune it

    Change the timing, ease and distance in the live preview until it feels right.

  3. 03.

    Copy it

    React, Vue or plain HTML. Or let your AI agent pull it through our MCP server.

  4. 04.

    Ship it

    It cleans up after itself, respects reduced motion and is safe with server rendering.

Circular Slider, exactly as it runs in the library. Drag it, then change how it moves.

Open the component

Customize

  • Movement
  • Duration
  • Ease
  • Curve
  • Autoplay
  • Curve on mobile

Available in

See all 121 components
Get access

Every component comes as plain HTML, React and Vue. In HTML you tune it with data-anm-* attributes; in React and Vue the same settings are props.

Working with an AI agent? Our MCP server hands Claude Code or Cursor the real source, so the GSAP it writes actually runs.

How the MCP server works
index.html
Read the docs

The docs carry what bit us the first time we shipped each thing: real warnings, real fixes.

  • Installation

    GSAP, the library, and the first component running in a minute.

    GSAP 3.13+ ships ESM-only - older bundlers need the legacy CJS path or builds silently exclude the timeline.

  • Quick start

    From copy-paste to a tuned component in under five minutes.

    useGSAP without a scope leaks selectors across remounts - every animation needs { scope: ref }.

  • Customization

    The data-anm-* attribute system. Every component tuned without touching the source.

    data-anm-* attributes read null on first render in Next.js 16 Strict Mode - gate the read inside useGSAP.

  • Performance

    What we tune before shipping, and what to watch in your own build.

    GSAP does not return early under prefers-reduced-motion - wrap entries in gsap.matchMedia or the animation runs at full speed for users who asked it not to.

  • Accessibility

    Focus, keyboard, reduced motion. The defaults that ship with every component.

    Focus trap inside overlays needs inert on siblings - aria-hidden alone still leaves keyboard reachable.

  • React

    useGSAP, scoped refs, cleanup that survives Strict Mode remounts.

    Cleanup with ctx.revert(), not tl.kill() - kill leaves scoped selectors mounted and the next remount double-binds.

  • Vue

    Composable for the script-setup workflow. Nuxt-ready.

    Setup script timing - onMounted fires before children mount; use nextTick before binding refs.

Kits are separate products. Not bundled with the Library, not unlocked with a subscription.

They stack. 20% off every Kit while you're a Library member, and 20% off your first Library year when you own a Kit.

The Library

Every kind of component a site needs, from buttons to page transitions, with new ones as they ship.

Components
121 and counting
Price
From €20 a month
Formats
React, Vue and HTML
Browse the library

A Landmark Kit

A deep, stand-alone collection of animations built around one system you'd otherwise build from scratch.

Kits
Reveal and Menu
Price
€149 one-time
Formats
React, Vue and HTML
See the Kits

121 components in React, Vue and HTML, built the way we build for Coca-Cola and Powerade.

Get accessGet 16 free components