The GSAP dialect

One call, and the component beside it

The export is a function, like animateCard(), aimed at a class on your component’s root, and the component comes back with that class written on it, as in CSS. Call the function once the markup is on the page. A scene’s target must stay a selector: its children are found by selector beneath it, so passing an element would find none. A reduced-motion scene says how to wrap it in gsap.matchMedia(); for a single element, that’s generated for you.

A stagger is one tween

Where several siblings run the same animation at an offset, GSAP expresses it as one tween over a selector with a stagger value. Motion needs a variant pair and CSS needs a rule per child. The selector names exactly the picked children (.card > :nth-child(2) > :is(:nth-child(1), …)), so rows nested inside the component, or only some of a parent’s children, get the stagger and nothing else does. A split heading’s letters are the one place a plain > span > span is exact, because every span there is one of them. GSAP staggers in document order, so a run you built last-to-first is exported as a timeline instead of being reversed.

A component that moves too

If the component animates as well as its children, the export is a timeline holding both: the component’s own tween, and the stagger inside it at the children’s start time.

Everything else is a timeline

Each child is placed at its real start time (the component too, if it starts late) and addressed by its whole path, so one handle pauses, reverses or seeks the whole choreography.

Our eases aren’t GSAP’s

Ours are the CSS bezier family; GSAP’s powerN eases are power curves. They don’t line up: easeOut and power2.out differ by 21.6% of the range, and the nearest built-in is still four times the tolerance away. So every preset except linear is sampled into percent keyframes.

`ease: none` is always written

GSAP’s default ease is power1.out. On a sampled tween whose stops already trace the curve, leaving the ease out would apply a second curve on top of the right one, so it’s written explicitly.

GSAP exports are checked against real GSAP in a browser, for single elements and for components with picked children.