npmIntermediate

gsap

The professional-grade JavaScript animation library — animate anything (DOM, CSS, SVG, Canvas, WebGL) with a timeline-based API.

animationtimelinesvguiperformance

The Problem

CSS animations struggle with complex sequences, can't animate JavaScript values or WebGL uniforms, and have no scroll synchronization. framer-motion is React-specific. You need animations that work everywhere with precise timing control.

Mental Model

GSAP's core primitive is a tween: gsap.to(target, { duration, properties }). Timelines sequence tweens: const tl = gsap.timeline(); tl.to(...).to(...). ScrollTrigger pins elements and scrubs timelines to scroll position. GSAP tweens anything with a numeric property — DOM, three.js objects, plain objects.

60-second start

Animate a sequence of elements

import gsap from 'gsap';

const tl = gsap.timeline({ defaults: { duration: 0.5, ease: 'power2.out' } });

tl
  .from('.hero-title', { opacity: 0, y: 40 })
  .from('.hero-subtitle', { opacity: 0, y: 30 }, '-=0.3')  // overlap by 0.3s
  .from('.hero-cta', { opacity: 0, scale: 0.9 }, '-=0.2')
  .from('.hero-card', { opacity: 0, y: 20, stagger: 0.1 }, '-=0.2');

Use it when

Marketing landing pages, scroll-driven storytelling, complex animation sequences, SVG/logo animations, parallax effects, or any animation that needs to be framework-agnostic.

Skip it when

Simple React UI micro-interactions where framer-motion or CSS is simpler. GSAP's free tier doesn't include ScrollSmoother and some plugins commercially.

Alternatives

framer-motionBetter React integration, declarative

motionFramework-agnostic successor to framer-motion

anime.jsLightweight free alternative for simpler cases

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.