GSAP — Professional-Grade Animation Platform for the Web

Introduction

GSAP (GreenSock Animation Platform) is a JavaScript animation library that handles everything from simple tweens to complex sequenced timelines. It works with any numeric property on any object, providing consistent cross-browser results at 60fps.

What GSAP Does

• Animates CSS properties, SVG attributes, canvas objects, and arbitrary JS values
• Sequences animations into timelines with precise control over overlap and stagger
• Provides scroll-triggered and scroll-driven animation via ScrollTrigger plugin
• Morphs SVG paths between shapes with MorphSVG plugin
• Handles responsive motion with matchMedia breakpoints and context management

Architecture Overview

GSAP uses a unified ticker that synchronizes all active tweens to requestAnimationFrame. A core engine interpolates values through configurable easing functions. Timelines compose tweens into a virtual playhead model, enabling scrubbing, reversing, and nesting. Plugins extend the core by registering custom property parsers without touching internal rendering logic.

Self-Hosting & Configuration

• Install via npm or load from CDN; supports ES modules, CommonJS, and UMD
• Register plugins explicitly with gsap.registerPlugin() for tree-shaking
• Configure global defaults for duration, ease, and overwrite behavior
• Use gsap.context() to scope animations and auto-cleanup on component unmount
• Licensed under a permissive free-to-use license with no attribution required

Key Features

• Animates anything JavaScript can touch — DOM, WebGL, Three.js, React state
• Timeline nesting allows modular, reusable animation compositions
• ScrollTrigger enables parallax, pin, and scrub effects with minimal code
• Staggers distribute delays across arrays of targets for cascade effects
• DevTools integration for visual timeline debugging and speed control

Comparison with Similar Tools

• CSS Animations — simpler but limited sequencing, no scroll-scrub, poor JS control
• Framer Motion — React-only, declarative; less granular timeline control
• Anime.js — lightweight but fewer plugins and less battle-tested at scale
• Web Animations API — native but inconsistent browser support and limited easing
• Popmotion — physics-based; archived in favor of Framer Motion

FAQ

Q: Is GSAP free to use? A: Yes. The core library and most plugins are free. A few premium plugins require a membership for commercial use.

Q: Does GSAP work with React and Vue? A: Yes. Use useGSAP hook or gsap.context() to scope animations to component lifecycle in any framework.

Q: How does performance compare to CSS transitions? A: GSAP often matches or beats CSS for complex animations because it batches DOM reads and writes and avoids layout thrashing.

Q: Can I animate SVG paths? A: Yes. The MorphSVG and DrawSVG plugins handle SVG-specific animations natively.

Sources

• https://github.com/greensock/GSAP
• https://gsap.com/docs/v3/