GSAP: a framework-agnostic JavaScript animation library with ScrollTrigger

What GSAP solves, and for whom

The README frames GSAP as a property manipulator: it updates values over time, and the properties can belong to CSS, SVG attributes, canvas draw calls, WebGL, colors, strings, motion paths or generic JavaScript objects. That breadth is the selling point. A team that animates a marketing page, a data visualization and a canvas game can use one mental model rather than three.

The second problem is browser inconsistency. The README claims GSAP "works around countless browser inconsistencies" so animations behave the same across engines. Whether you accept that claim, the design consequence is real: GSAP owns the timing loop instead of delegating to CSS keyframes, which is why sequencing and mid-flight control are possible at all.

The intended audience is developers who need control rather than decoration. If your requirement is a hover transition, GSAP is more machinery than the job needs. If your requirement is a timeline that reverses, seeks, pauses and stays in sync with scroll position, the library is built for exactly that.

How the core and its plugins fit together

The repository splits into `src/`, `esm/`, `dist/` and `types/`. The `package.json` maps `import` to `./esm/index.js`, `require` to `./dist/gsap.js` and types to `./types/index.d.ts`, so the same package name serves ES module and CommonJS consumers. The README notes the NPM files are ES modules while `/dist/` also carries UMD builds for compatibility.

Plugins are not loaded automatically. The README's import example pulls `ScrollTrigger`, `Flip` and `Draggable` from their own subpaths and then calls `gsap.registerPlugin(...)` with the same list. Registration is the wiring step: an imported plugin that is never registered will not attach its behaviour. There is also a barrel file, `gsap/all`, which exports the tools together, with the README noting it excludes members-only plugins.

The core is described as zero-dependency, and `package.json` sets `sideEffects: false`, which lets bundlers drop unused modules. Plugin code lives behind subpath exports, so a project that only animates CSS does not have to ship the scroll machinery.

Installing GSAP and running a first timeline

The README points to gsap.com/install for full instructions and gives two routes. For a script tag, the documented CDN file is the minified core:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

Loading that file exposes a global `gsap` object, and the README notes JSDelivr maintains a dedicated GSAP page with links to the core files and plugins. For a bundled project, the documented command is:

npm install gsap

After installing, the README's typical import pulls the default export plus any plugins you need, then registers them:

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

gsap.registerPlugin(ScrollTrigger, Draggable, Flip);

If you prefer a single import, the README offers the barrel form, which it says excludes members-only plugins:

import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";

What you should see after this step is a working `gsap` reference in your module scope and registered plugins that respond to their documented configuration. The README does not show a complete animated example, so the first real animation is a matter of calling the core API against a target element and reading the plugin docs for configuration keys.

The React path is a separate package

React users do not get special handling from the core package. The README directs them to `@gsap/react`, a package that exposes a `useGSAP()` hook described as a drop-in replacement for `useEffect()` and `useLayoutEffect()` that automates cleanup. The React guide lives at gsap.com/react.

That separation matters during evaluation. Installing `gsap` alone gives you the animation engine but not the hook, so a React codebase that wants the documented cleanup behaviour needs a second dependency. The README does not describe what cleanup is performed or which effect the hook maps to internally; it only states the substitution and points at the guide. Treat the hook as a convenience wrapper, not a different animation model.

Where GSAP is the wrong choice

The plugin model is the main friction. Anything beyond the core, including ScrollTrigger, Flip, Draggable, MorphSVG, SplitText and MotionPath, is imported separately and registered before use. Forget the registration call and the plugin is not wired in; the README's own import example carries the reminder "don't forget to register plugins".

GSAP also owns animation timing, which puts it in tension with frameworks that already manage rendering. The README does not document rollback, cleanup beyond the React hook, or how registered plugins interact with server-side rendering, so those are questions for the docs and forums rather than the repository front page. If your site is mostly static and your motion is decorative, CSS transitions and the platform's own scroll-driven animation features cost nothing extra.

The README's performance framing ("up to 20x faster than jQuery") is a comparison against a library most projects no longer use. It is not evidence about GSAP against modern alternatives, and it should not be read as one.

GSAP against Motion and CSS-driven approaches

Motion, formerly Framer Motion, is the obvious comparison, and the difference is architectural. Motion is built around declarative component props and React's render cycle, which means animation state lives in the component tree. GSAP is imperative: you pass a target and a property object to a function, and the library mutates values on its own ticker outside the framework's rendering. For React work, that means Motion feels native while GSAP needs the `useGSAP()` hook to clean up after itself.

The trade-off runs the other way for sequencing. GSAP timelines compose, nest, reverse and seek as first-class objects, and the same API drives SVG, canvas and WebGL, which is where declarative component libraries get awkward. If your animation is a scroll-driven sequence across mixed media, GSAP's model is a better fit. If your animation is a button that scales on press, Motion's declarative form is less code and no registration step.

Licence, maintenance and upgrade cost

The README states that GSAP is now 100% free, including bonus plugins such as SplitText and MorphSVG that were previously limited to Club GSAP members, and that this applies to commercial use. The stated reason is Webflow's involvement, with a link to a Webflow blog post. The repository itself points to the standard no-charge licence at gsap.com/standard-license for the actual terms, and the README carries a GreenSock copyright line. Read that licence text before shipping; nothing in the repository substitutes for it.

The repository is not archived, and the last push was on 2026-04-13. The repository publishes no releases, so version history has to be read from the package itself: `package.json` declares `3.15.0`, which matches the version in the documented CDN URL. Upgrades are package-level substitutions with no separate build step, but the plugin registration pattern means an upgrade that changes a plugin's export path will surface as a broken import rather than a runtime error, so check the import lines after bumping the version.

Editorial conclusion

Adopt GSAP if you need sequenced timeline control over DOM, SVG or canvas properties and you want one API across frameworks; the npm package is `gsap`, and the README's React path is the separate `@gsap/react` package with its `useGSAP()` hook. Skip it if your animation needs are satisfied by CSS transitions or a component-level library that already ships with your framework, because GSAP adds a runtime and a plugin registration step you would otherwise not carry. Verify two things before committing: that the plugins you need are imported from the paths your bundler resolves (the README shows `gsap/ScrollTrigger` and `gsap/all`), and that your commercial use fits the standard no-charge license at gsap.com/standard-license, which is the only license text this repository points to.

Frequently asked questions

Official sources

1. greensock/GSAP on GitHub
2. Issues
3. Project website
4. README