GSAP

What Is GSAP?

GSAP, the GreenSock Animation Platform, is the leading professional JavaScript animation library for the web. It animates almost anything you can express as a number: CSS properties, SVG attributes, canvas values, WebGL parameters, and arbitrary properties of plain JavaScript objects. If you want the short answer: GSAP is the toolkit behind a large share of award-winning, motion-rich websites, prized for smooth performance, a precise timeline system, and a scroll-driven animation plugin called ScrollTrigger that has become a near-standard for storytelling sites.

GSAP is produced by GreenSock and has been refined over many years across multiple major versions. It is consistently cited as the most capable general-purpose animation library in the JavaScript ecosystem and is reported to power animations on millions of websites, including a long list of agency portfolios and brand experiences. Exact site counts depend on the survey and change over time, so treat specific numbers cautiously; what is consistently observed is that GSAP dominates the high-end, motion-heavy segment of the web and is the default recommendation when CSS animations and transitions are not powerful enough.

The library is framework-agnostic. It works with React, Vue, Svelte, Angular, or no framework at all, because at its core it is simply a high-performance engine for changing numeric values over time. That neutrality, combined with its plugin ecosystem, is why it appears across such a wide range of sites.

How GSAP Works

At the heart of GSAP is the tween: an instruction to animate one or more properties of a target from a starting value to an ending value over a duration, with an easing curve that shapes the motion. You create tweens with methods like gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set(). GSAP reads the current value, computes intermediate values frame by frame, and writes them back to the target.

The engine is driven by a single internal ticker built on requestAnimationFrame. Rather than letting every animation schedule its own frame callback, GSAP runs one loop that updates all active tweens in sync. This centralized approach reduces overhead and helps maintain smooth frame rates even with many simultaneous animations. GSAP also batches and optimizes DOM access to limit layout thrashing, and it normalizes browser quirks so animations behave consistently across engines.

The second core concept is the timeline. A gsap.timeline() is a container that sequences tweens with precise control: animations can run one after another, overlap by a relative offset, start at named labels, stagger across multiple elements, and be nested inside other timelines. The whole timeline can then be played, paused, reversed, sped up, or seeked to a specific time as a single unit. This is what makes complex, choreographed sequences manageable; you describe the relationships between animations once and control them as a group.

GSAP's capabilities expand through plugins. The most important is ScrollTrigger, which ties any tween or timeline to scroll position. With ScrollTrigger you can start and end animations as elements enter and leave the viewport, pin an element in place while the page scrolls past it, scrub a timeline so its progress maps directly to scroll position, and snap to defined points. Other official plugins include MorphSVG (shape morphing), DrawSVG (progressive stroke drawing), SplitText (breaking text into characters, words, and lines for animation), Flip (animating layout changes), MotionPathPlugin (moving along a path), and Draggable (drag-and-drop interactions).

Loading GSAP typically means including the core file (gsap.min.js) and any plugins, then calling gsap.registerPlugin(ScrollTrigger) to activate them. In module projects you import from the gsap package. Because GSAP writes inline styles and uses transforms for movement and scaling, it leans on GPU-accelerated compositing where possible, which is a major reason its motion feels smoother than many alternatives.

How GSAP Works in Practice on a Page

When a page using GSAP loads, the library initializes its ticker and any registered plugins, then runs whatever tweens and timelines the site has defined. For scroll-based sites, ScrollTrigger measures element positions and the document height, sets up scroll listeners, and recalculates on resize. The visible result is the familiar vocabulary of modern motion design: sections that fade and slide in, headings whose letters animate individually, pinned panels that transition as you scroll, and SVGs that draw themselves.

How to Tell if a Website Uses GSAP

GSAP leaves several dependable fingerprints. Because StackOptic inspects a page's HTML and referenced scripts server-side, the script URLs and exposed globals are the most reliable signals.

Signals in the page and network

• Script filenames. Look for gsap.min.js, gsap.js, plugin files like ScrollTrigger.min.js, DrawSVGPlugin.min.js, or the legacy TweenMax.min.js and TweenLite.min.js from GSAP 2 and earlier.
• CDN paths. GSAP is commonly served from cdnjs.cloudflare.com/ajax/libs/gsap/..., cdn.jsdelivr.net/npm/gsap@.../, and unpkg.com/gsap@.../. The GreenSock site also distributes files. Spotting these in the Network tab is a strong indicator.
• JavaScript globals. Modern GSAP attaches gsap to window. Legacy versions exposed TweenMax, TweenLite, TimelineMax, and TimelineLite. Typing gsap in the DevTools Console and getting a function object back confirms presence.
• Version property. Running gsap.version in the Console returns a version string (for example a 3.x value), confirming the major version in use.
• Inline style signatures. GSAP-animated elements typically carry inline transform styles and often a will-change hint while animating. Pinned ScrollTrigger sections frequently sit inside an injected wrapper element with pin-spacer in its markup.

Tools to confirm it

Tool	What you do	What it reveals
View Source	Open the page source	<script> tags for gsap.min.js, ScrollTrigger, or TweenMax.min.js
DevTools Console	Type gsap and gsap.version	The global object and exact version string
DevTools Network	Reload with the Network tab open, filter by gsap	Requests for GSAP core and plugin files and their CDN host
DevTools Elements	Inspect animating nodes	Inline transform/will-change styles and pin-spacer wrappers
Wappalyzer	Run the browser extension	Flags GSAP in the JavaScript graphics/animation category

For a step-by-step method you can apply to any front-end dependency, see our guide on how to check what JavaScript libraries a website uses, and for whole-stack analysis, the broader primer on how to find out what technology a website uses.

A caveat: when GSAP is bundled with a build tool, the standalone filename may disappear and the global may be scoped rather than attached to window. In those cases, look for the inline-style and pin-spacer signatures in the rendered DOM, or use a detection extension.

Key Features

GSAP's reputation rests on a combination of performance and expressive control.

• Universal tweening. Animate CSS, SVG, canvas, WebGL, and plain object properties through one consistent API.
• Timelines. Sequence, overlap, stagger, label, nest, and control complex animations as a single unit.
• ScrollTrigger. Scroll-linked animation with viewport triggers, pinning, scrubbing, and snapping.
• Rich easing. A large set of built-in eases plus custom and elastic/bounce options for natural motion.
• Specialized plugins. MorphSVG, DrawSVG, SplitText, Flip, MotionPath, and Draggable for advanced effects.
• Performance focus. A single requestAnimationFrame ticker, batched DOM access, and transform-based motion for smooth frame rates.
• Framework-agnostic. Works in React, Vue, Svelte, Angular, or vanilla JavaScript, with helpers for cleanup in component lifecycles.

The features that most define GSAP in the wild are timelines and ScrollTrigger. Timelines turn what would be brittle chains of setTimeout calls into declarative, reversible sequences. ScrollTrigger, meanwhile, is responsible for much of the modern scroll-storytelling aesthetic, and its presence in a page's scripts is one of the clearest signs you are looking at a deliberately motion-designed site.

Pros and Cons

GSAP's trade-offs reflect its position as a powerful, professional tool.

Pros

• Best-in-class performance and smoothness for complex animation.
• A precise, reversible timeline system unmatched by CSS.
• ScrollTrigger makes sophisticated scroll effects approachable.
• Framework-agnostic and stable across browsers.
• Mature documentation and a large community of examples.

Cons

• Adds JavaScript weight compared with pure CSS animation.
• A learning curve for timelines, plugins, and advanced patterns.
• Heavy motion can affect accessibility if reduced-motion preferences are ignored.
• Overkill for simple hover states or single transitions that CSS handles natively.
• Performance still depends on disciplined use; animating layout-affecting properties can cause jank.

The pragmatic stance is to use CSS transitions and animations for simple, declarative effects, and reach for GSAP when you need sequencing, scroll-linking, SVG morphing, or fine-grained playback control, always honoring prefers-reduced-motion.

GSAP vs Alternatives

Several libraries compete in the JavaScript animation space, each with a different emphasis.

Library	Strengths	Trade-offs
GSAP	Performance, timelines, ScrollTrigger, broad target support	JS weight; learning curve for advanced features
CSS animations/transitions	Native, lightweight, declarative, GPU-friendly	No timelines, limited sequencing, weak scroll control
Anime.js	Lightweight, friendly API, good for moderate needs	Fewer advanced plugins; less scroll tooling
Framer Motion	Declarative, React-first, layout and gesture animations	React-only; different model from imperative timelines
Web Animations API	Built into browsers, timeline-like control	Less ergonomic; uneven advanced-feature support

For interactive 3D rather than 2D motion, teams often pair or compare GSAP with a WebGL library; see our profile of Three.js for that side of the spectrum. React-centric teams frequently weigh GSAP against Framer Motion, choosing GSAP when they need timeline precision or ScrollTrigger and Framer Motion when they want a declarative, component-driven approach.

Use Cases

GSAP appears wherever motion is a deliberate part of the experience.

• Marketing and brand sites. Hero animations, scroll-driven storytelling, and section reveals on agency and product pages.
• Interactive data and SVG. Animated charts, diagrams, and logos using DrawSVG and MorphSVG.
• Product showcases. Pinned, scrubbed sequences that walk visitors through features as they scroll.
• Microinteractions. Polished button, menu, and transition states that elevate perceived quality.
• Games and creative experiences. Coordinating canvas and WebGL values alongside DOM animation.

For technographic and competitive analysis, detecting GSAP, especially with ScrollTrigger, signals an investment in high-end motion design and usually an agency-grade or design-led build. That insight helps agencies benchmark competitors, helps vendors identify design-conscious prospects, and helps anyone auditing a site understand why it feels more polished than a typical template.

Frequently Asked Questions

Is GSAP free to use?

GSAP's core and its most popular plugins, including ScrollTrigger, are available to use without cost under GreenSock's standard licensing for the vast majority of projects. Licensing terms have evolved across versions and ownership changes, so for commercial specifics, especially around any premium or members-only plugins, always confirm the current terms on the official GreenSock website rather than relying on older summaries.

How do I know if a site uses GSAP versus CSS animations?

Check the Network tab and View Source for GSAP script files (gsap.min.js, ScrollTrigger.min.js, or legacy TweenMax.min.js). In the Console, type gsap or gsap.version. CSS-only animations will not load these scripts or expose the global. Pinned scroll sections wrapped in pin-spacer elements are another strong GSAP-specific signal.

What is ScrollTrigger and why is it so common?

ScrollTrigger is GSAP's plugin for tying animations to scroll position. It can trigger animations when elements enter the viewport, pin elements during scrolling, and scrub a timeline so its progress follows the scrollbar. It is common because it makes the scroll-storytelling effects seen on many modern marketing sites straightforward to build with reliable performance.

Does GSAP work with React, Vue, or Svelte?

Yes. GSAP is framework-agnostic because it animates values rather than owning the view layer. It integrates with React, Vue, Svelte, and Angular, and GreenSock provides patterns and helpers (such as React's useGSAP hook) for setting up and cleaning up animations within component lifecycles so animations do not leak across re-renders or unmounts.

Is GSAP bad for accessibility or performance?

Not inherently, but heavy or autoplaying motion can cause discomfort and should respect the prefers-reduced-motion setting. Performance is generally excellent thanks to GSAP's single ticker and transform-based animation, but animating layout-affecting properties or running too many simultaneous effects can still cause jank. Disciplined, transform-focused animation keeps things smooth.

Want to detect GSAP, ScrollTrigger, and the entire front-end stack behind any website instantly? Try StackOptic at https://stackoptic.com.