Quick start.

Take one component from the library into a page, start to finish. We'll use Text Reveal, a scroll-triggered headline. It's in the free Starter Pack, so you can follow along with the real files.

  1. 01

    Install GSAP

    Once per project, see Installation. React needs gsap and @gsap/react, Vue needs gsap, and plain HTML loads GSAP from a CDN.

  2. 02

    Copy the component's files

    Open Text Reveal and expand the code under the preview. Pick your stack, then save each file under the name shown above it.

    Your project

    The component imports its own CSS, so keep the two files side by side under those names.

  3. 03

    Use it in a page

    The Usage tab next to the files shows this for every component: the import, the markup it expects and the props in context.

    app/page.jsx

    That's all. The component file starts with "use client" and registers ScrollTrigger and SplitText itself, so it works from a server page in the Next.js App Router. The @/path is the Next.js default alias; use a relative path if your project doesn't have one.

  4. 04

    Change one value

    Slow the reveal down and space the words out. In React and Vue that's a prop, in HTML the same name as a data-anm-* attribute.

    app/page.jsx

    That's the whole loop.

    Every component works this way: copy its files, import it, render it, change a value. Each component page lets you tune its options live before you copy, and the Customizing a component guide covers the naming.
Troubleshooting

If something looks off

The component shows up, but without its styling.
The stylesheet isn't loading. In React, text-reveal.jsx imports ./text-reveal.css, so the CSS file has to sit next to it under exactly that name. In Vue, import the CSS yourself, where you use the component or once in main.js. In HTML, link it in <head>.
The text never appears.
Some components hide their content until GSAP takes over, so nothing flashes before the animation starts. If GSAP never runs, the content stays hidden. In HTML, check the browser console and make sure GSAP and every plugin from the component's What you'll need list load before the component's script. In React and Vue, make sure gsap is installed.
Next.js says hooks only work in a client component.
Every React component starts with "use client". If you copied only part of the file, put that line back at the very top. Your page itself can stay a server component.
Do I need containerRef, useGSAP or gsap.from?
No. Those are for writing an animation of your own (see Installation). An Annnimate component sets up its own refs, scope and cleanup. You import it and render it.
Which plugins does a component need?
Its page lists them under What you'll need. React and Vue components import and register their plugins for you. In plain HTML, load each one from the CDN before the component's script.
NextCustomizing a componentProps, attributes and how they're named.NextPerformance and accessibilityReduced motion and the performance budget.