GSAP animations, written as class names.

Open the example ↗

• No flashElements that animate in are hidden before the first paint. If the script never arrives, they show after three seconds. A menu that opens on a click stays closed.
• Nothing left behindWhen a reveal finishes, the element goes back to plain HTML. No stray inline styles, no split spans. A reveal that has played stays played, also after a resize.
• Loads what it needsScrollTrigger, SplitText and the rest are fetched the first time a class asks for them.
• Watches the pageElements added later animate too. Removed ones are cleaned up, also in React. What sits in a closed tab or dialog animates when it is shown.
• Respects less motionVisitors who ask for reduced motion get the finished page without the movement. What still waits for the scroll stays within reach of the Tab key and screen readers.
• Tells you about typosWrite gs-fad-up on localhost and the console asks if you meant gs-fade-up.

<!-- From below on phones, from the right on wider screens -->
<div class="gs-fade-up md:gs-fade-left">

<!-- No parallax on small screens -->
<img class="gs-parallax max-md:gs-off">

<!-- A longer pin on desktop -->
<section class="gs-timeline gs-scrub gs-pin-150 lg:gs-pin-300">

<!-- A gentler version for visitors who ask for less motion -->
<h2 class="gs-flip-up motion-reduce:gs-fade">
      

• Reveals and loopsWith reduced motion on, they do not run. The element simply shows in its final state, and a count or an odometer is simply the number.
• Scrubbed animationsThey stay, because the visitor is the one moving them, but without the smoothing. Parallax, marquees and magnets are switched off.
• Your callAdd gs-motion-ok to keep one anyway, or a motion-reduce: class to give it a calmer version.

// A server component. Nothing here runs on the client except the classes.
export default function Features({ items }) {
  return (
    <section className="gs-timeline gs-pin-200 gs-scrub">
      <h2 className="gs-split-lines gs-mask gs-slide-up">What you get</h2>
      <ul className="gs-fade-up gs-stagger-0.1">
        {items.map((item) => <li key={item}>{item}</li>)}
      </ul>
    </section>
  );
}
      

• Page changesAnimations on the old page are removed with it, pinned sections included. React normally throws when it removes a pinned element. Here it does not.
• Lists and stateItems added to a staggered list animate in. Text that changes inside a split heading is split again.
• Strict mode and hydrationEach animation is made once, after hydration. With the stylesheet imported, server-rendered pages do not flash.
• A scope, if you want oneWrap a part in <Gs>...</Gs> and its animations are removed the instant React unmounts it.

// Defaults for the whole site
gs.config({ duration: 1, ease: "expo.out", distance: 60 });

// A class of your own: gs-swoop
gs.preset("swoop", { from: { autoAlpha: 0, y: 80, rotation: 6 } });

// Anything GSAP can do, as a class: gs-glow (it runs the headline on this page)
gs.preset("glow", {
  build(timeline, words) {
    timeline.from(words, { opacity: 0, duration: 0.45, stagger: 0.045 });
  },
});

// The GSAP timeline behind an element
const [timeline] = gs.get("#hero");
timeline.timeScale(2);

// Events, on the element itself
document.addEventListener("gs:complete", (event) => console.log(event.target));