GSAP
A high-performance JavaScript animation library
GSAP (GreenSock Animation Platform) is a high-performance JavaScript animation library for animating virtually any property of DOM elements, SVG, canvas objects, or JavaScript objects, known for consistent cross-browser behavior,…
Definition
GSAP (GreenSock Animation Platform) is a high-performance JavaScript animation library for animating virtually any property of DOM elements, SVG, canvas objects, or JavaScript objects, known for consistent cross-browser behavior, fine-grained timeline control, and animation performance exceeding native CSS transitions in many cases.
Overview
GSAP has been developed by GreenSock since the mid-2000s, originally rising to prominence in the Flash era before pivoting fully to JavaScript as Flash declined, and it has remained a dominant choice for professional web animation ever since. Its core strength is animating almost any numeric property — not just CSS properties like opacity and transform, but SVG attributes, canvas drawing parameters, or arbitrary values on plain JavaScript objects — through a single consistent API (`gsap.to()`, `gsap.from()`, `gsap.fromTo()`), abstracting away inconsistencies in how different browsers handle CSS transitions and animations. The defining feature that distinguishes GSAP from simpler animation utilities is its `Timeline` object, which lets developers sequence and orchestrate many animations with precise relative or absolute timing, including overlapping, staggering across multiple elements, and nested timelines — control that is difficult or verbose to achieve with CSS animations or the Web Animations API alone. GSAP's plugin ecosystem extends this further: ScrollTrigger synchronizes animations to scroll position (widely used for scroll-driven storytelling sites), MorphSVG interpolates between SVG shapes, Draggable adds drag interactions, and Flip animates layout changes between DOM states. GSAP historically required a paid 'Club GreenSock' membership for some premium plugins (MorphSVG, SplitText, and others), but as of 2025 GreenSock (having been acquired by Webflow) made the entire plugin library, including previously paid plugins, free for all users, removing what had been its main adoption barrier. GSAP is the de facto standard for high-production-value marketing sites, interactive storytelling, and any project needing precisely choreographed, cross-browser-consistent animation beyond what CSS transitions alone can comfortably express.
Key Features
- Single consistent API for animating DOM, SVG, canvas, and plain JS object properties
- Timeline object for precise sequencing, overlapping, and staggered animations
- ScrollTrigger plugin for scroll-driven animation and storytelling effects
- MorphSVG, Draggable, and Flip plugins for advanced interaction and shape animation
- Consistent, high-performance cross-browser behavior beyond native CSS transitions
- Fine-grained easing control with a large built-in and custom easing library
- Now entirely free, including plugins previously behind a paid membership
- Framework-agnostic — usable with React, Vue, vanilla JS, or any stack