GSAP

GSAP (GreenSock Animation Platform) is a framework-agnostic JavaScript animation engine that lets developers animate almost anything a browser can render: CSS properties, SVG attributes, canvas objects, colors, strings, and generic JavaScript objects. At its core it’s a high-precision property manipulator that updates values over time with far tighter control and better performance characteristics than CSS transitions or jQuery-based animation.

It ships with zero dependencies and a plugin architecture that adds advanced capabilities on demand — scroll-driven animation via ScrollTrigger, drag interactions via Draggable, SVG morphing, motion-path animation, and text splitting — without bloating the core bundle for projects that don’t need them. Originally a paid-tier product for advanced plugins, GSAP (including all previously members-only plugins) became fully free in 2024 under GreenSock’s sponsorship by Webflow.

What You Get

• A core gsap object with to(), from(), fromTo(), and set() methods for tweening any numeric, color, or string property on DOM elements or plain JS objects
• Timeline sequencing for choreographing multiple tweens with precise relative or absolute offsets, labels, and nested timelines
• ScrollTrigger plugin for scroll-linked animations, pinning, and scrubbing, plus the companion ScrollSmoother for buttery inertial scrolling
• Draggable, Flip, MotionPathPlugin, MorphSVGPlugin, SplitText, and Observer for drag interactions, FLIP-based layout transitions, SVG morphing, motion-path animation, text splitting, and normalized input events
• gsap.matchMedia() for building responsive, accessibility-aware animations that adapt or disable based on media queries and prefers-reduced-motion
• A dedicated @gsap/react package exposing a useGSAP() hook as a drop-in replacement for useEffect/useLayoutEffect with automatic cleanup

Common Use Cases

• Scroll-driven marketing and landing pages (parallax sections, pinned panels, scroll-scrubbed reveals) built with ScrollTrigger
• Choreographed multi-element UI sequences — modals, onboarding flows, hero sections — using Timeline for exact relative timing
• SVG icon and illustration animation, including shape morphing between arbitrary paths with MorphSVGPlugin
• Drag-and-drop interfaces, sortable lists, and swipeable carousels built on the Draggable plugin
• Animating React/Vue component state transitions via the useGSAP() hook or direct gsap.to() calls in lifecycle hooks

Under The Hood

Architecture: GSAP’s core sits in src/gsap-core.js (~3,250 lines), organized around a class hierarchy — Animation as the shared base, with Timeline and Tween both extending it — plus supporting classes GSCache (per-target property-value caching to avoid redundant DOM reads) and PropTween (the atomic unit that interpolates one property over time). Context and MatchMedia layer on top to provide scoped cleanup and responsive matchMedia()-driven animation registration. Everything else — CSSPlugin, ScrollTrigger, Draggable, Flip, MorphSVGPlugin, and roughly two dozen other plugins in src/ — registers itself into the core via gsap.registerPlugin(), so the core stays small and plugins are opt-in via explicit imports (import ScrollTrigger from "gsap/ScrollTrigger"), enabling tree-shaking in bundler-based builds.

Tech Stack: The published package is zero-dependency vanilla JavaScript (98.6% JS, 1.4% TypeScript by byte count) with hand-written .d.ts type declarations under types/ (no dependence on a build-time type generator). The repo ships pre-built output in both dist/ (UMD, for <script>/CommonJS consumption) and esm/ (ES modules, tree-shakeable) — this GitHub repository is effectively a release mirror of the npm package rather than the primary development repo, which explains the single squashed commit history.

Code Quality: No test suite is present in this repository (consistent with it being a distribution mirror rather than the dev repo); code style is consistent across the ~30 source files, with descriptive class and method names (GSCache, PropTween, matchMedia) and inline comments marking non-obvious tree-shaking protections (e.g. to protect from tree shaking in index.js). Error handling favors silent no-ops and sensible defaults over throwing, matching its use in visual/animation contexts where a broken tween shouldn’t crash a page.

API Design: The public API is intentionally minimal and consistent — nearly every plugin and core feature is driven through the same gsap.to(target, vars) / gsap.timeline() vocabulary, so learning one plugin transfers directly to the next. gsap.registerPlugin() is the single explicit step required before using any plugin, which keeps the mental model simple at the cost of one extra line per plugin. TypeScript types are comprehensive and cover the full plugin surface, including discriminated RegisterablePlugins unions.