Quick start.

Copy your first component and have it running in about two minutes. We'll walk one component end to end - a scroll-triggered text reveal.

Step 1

Find it in the library

Open the library, pick a component, and open its page. Every component has a live preview, an attribute reference, and the code in HTML, React, and Vue. For this walkthrough, open any text reveal.

Step 2

Copy the format you want

On the component page, choose your framework tab and hit Copy. Here's the shape of what lands on your clipboard. The exact attributes and props are listed on each component's own page.

index.html

Step 3

Paste it and run

Drop the markup where you want it. In HTML, make sure GSAP is loaded before the component script - see Installation. In React, the component is self-contained: it runs its own useGSAP on mount. Reload, and the headline reveals on scroll.

Step 4

Tune one attribute

Every component is tuned through the same data-anm-* attributes, or the matching props in React and Vue. Slow the reveal down and lengthen the stagger:

index.html

That's the whole loop.

Find a component, copy it, paste it, change a value. The Customizing a component guide covers the full attribute system.

NextCustomizing a componentThe full data-anm-* and props system.NextPerformance and accessibilityReduced motion and the performance budget.