GSAP: The Free JavaScript Animation Library from GreenSock

What GSAP Solves and Who It Is For

GSAP is a JavaScript library that addresses programmatic animation across browsers. Its primary audience is frontend developers who need fine-grained control over the timing, sequencing and reversal of animations that CSS transitions cannot provide on their own. CSS transitions work well for simple opacity fades and transform effects triggered by state changes, but they offer no native way to run animation A after animation B finishes, pause a sequence mid-run, or tie animation progress to a scroll position. GSAP fills that gap with a consistent API.

The README describes the library's scope as animating "CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects, anything JavaScript can touch." That means GSAP operates at the JavaScript property level rather than at the CSS declaration level, giving it access to values that CSS cannot animate directly.

Version 3.15.0 is the current release in package.json. The package has zero dependencies and targets every major browser.

The Tweening Engine and Timeline Architecture

At its core, the README describes GSAP as "a high-speed property manipulator, updating values over time with extreme accuracy." A tween is the fundamental unit of animation: a call to gsap.to(), gsap.from(), or gsap.fromTo() creates a tween that interpolates a target's named properties from one value to another over a specified duration. Any property JavaScript can read and write is a valid target.

Timelines are where GSAP's design becomes most useful in practice. A gsap.timeline() groups tweens into a sequence that plays in order by default. The position parameter added to each call inside the timeline controls placement relative to the previous tween or to a named label: "-=0.2" starts that tween 0.2 seconds before the previous one ends, while a positive offset adds a gap. Nested timelines allow modular animation components that compose into larger sequences. The whole timeline can be paused, reversed, restarted or seeked to a specific time in code.

Plugins extend the property update loop with domain-specific behavior. ScrollTrigger ties animation progress to the page scroll position. Flip captures a DOM element's layout state before and after a change and animates the difference. MotionPathPlugin moves an element along an SVG path. Each plugin must be registered with gsap.registerPlugin() before any tween can use it.

Installing GSAP via CDN or npm

The CDN path requires one script tag. The README gives the following for version 3.15:

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

For projects using a bundler, install the package:

npm install gsap

The package ships ES modules under the `esm/` directory and UMD files under `dist/` for environments that do not support ES modules natively. After installing, import the core and any plugins you need, then register those plugins before calling any tween:

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";
gsap.registerPlugin(ScrollTrigger, Draggable, Flip);

The registration step is not optional. Importing a plugin without calling gsap.registerPlugin() means the plugin is present in the bundle but its special behavior is silently absent from any tween that depends on it. For React specifically, the README recommends the @gsap/react package, which exposes a useGSAP() hook that acts as a drop-in replacement for useEffect() and handles animation cleanup automatically on unmount.

The Full Plugin Suite: Now Free in the Public Package

Before Webflow's acquisition of GreenSock, several plugins were exclusively available to paid Club GSAP members: ScrollTrigger, SplitText, MorphSVGPlugin, ScrollSmoother, Flip and others. The README states that following the acquisition, "the entire GSAP toolset is FREE, even for commercial use." All those plugins are now distributed in the public gsap npm package. No private registry, no authentication token and no Club membership are required.

This changes the dependency cost concretely. A project using ScrollTrigger no longer requires any license procurement step. SplitText, which splits text elements into individually animatable characters, words and lines, is included on the same terms. The README directs users to jsDelivr's dedicated GSAP page for CDN links to individual plugin files for CDN-based setups.

Where GSAP Does Not Belong

GSAP requires a JavaScript runtime. It cannot produce animations inside static HTML emails, PDFs, or documents served to clients where JavaScript execution is blocked. Attempting to use it in a Node.js server context without a DOM polyfill will fail at the point where it tries to read or write element properties.

For a single-property transition triggered by a CSS class change, adding the full GSAP package is out of proportion. A CSS transition on :hover achieves the same effect without any JavaScript download or initialization cost.

The license is a concrete constraint for some organizations. GSAP is not released under an OSI-approved license such as MIT or Apache. The README refers to the "GreenSock standard 'no charge' license" and links to https://gsap.com/standard-license. Any team with a policy requiring permissively licensed dependencies must review that license before adopting GSAP in a product. The zero price does not make the terms permissive.

GSAP and Native Browser Animation: Two Different Control Models

The browser-native path for animation is CSS transitions, CSS @keyframes and the Web Animations API. For opacity and transform-only animations, the browser's compositor can process these without touching the main JavaScript thread, which is a performance characteristic GSAP cannot match on those specific properties.

The gap appears at the control layer. The Web Animations API exposes a play(), pause() and finish() interface, but building a sequenced timeline of multiple elements with relative offsets requires custom code that the API does not provide. CSS keyframes are fully declarative and have no built-in mechanism for runtime reversal, mid-animation seeking or dynamically adjusted easing.

GSAP's trade-off is a JavaScript dependency in exchange for a unified interface for sequencing, seeking, reversing and driving animation from any runtime value including scroll position. The README notes that GSAP "works around countless browser inconsistencies" that affect the Web Animations API in practice, which is relevant for projects targeting a wide browser range.

Maintenance History and License Terms

The last push to the greensock/GSAP repository was on 2026-04-13. The repository is not archived. The current version in package.json is 3.15.0. The repository has no GitHub releases published; the npm package registry is the authoritative source for version history.

The license is GreenSock's standard no-charge license, not a standard open-source license. The README points to https://gsap.com/standard-license for the full text. The copyright notice reads "Copyright (c) 2008-2026, GreenSock. All rights reserved." Organizations that require an OSI-approved license as a condition of adoption cannot use this on the basis of price alone; the license terms must be reviewed independently.

Editorial conclusion

Frontend developers who need to sequence, reverse or scroll-drive multiple coordinated animations will find GSAP's timeline and plugin API the most direct path to that result. Teams with strict requirements for OSI-approved open-source licenses should read the GreenSock standard no-charge license at https://gsap.com/standard-license before committing. For simple single-property hover transitions, CSS handles the job without any JavaScript dependency.

Frequently asked questions

Official sources

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