How it works
GSAP animates any numeric property: CSS, SVG, canvas objects or values in a WebGL scene. A tween moves one thing from A to B, and a timeline sequences many tweens with precise timing, so a whole intro can be paused, reversed or scrubbed. Plugins add scroll-driven animation (ScrollTrigger), text splitting (SplitText), shape morphing (MorphSVG) and more.
It does not depend on any framework; React projects usually use the useGSAP hook from @gsap/react, which cleans animations up automatically. Webflow acquired GreenSock in 2024 and in 2025 made GSAP and every formerly paid plugin free, commercial use included. The licence is Webflow's own rather than an open-source one, and it forbids using GSAP inside no-code animation builders that compete with Webflow.
GSAP pros and cons
Pros
- Precise timelines for long, choreographed sequences
- ScrollTrigger makes scroll-driven storytelling straightforward
- Works with any framework, SVG, canvas and WebGL
- Every plugin is now free, including for commercial work
- Mature, with thorough docs and an active forum
Cons
- Imperative style fits less naturally into React components
- Its own licence, not open source, with a restriction on competing tools
- Easy to overdo animation and slow a page down
When to use GSAP
Pick it when
- Marketing and portfolio sites with scroll-driven storytelling
- Complex sequences, SVG animation and text effects
- Animating canvas or WebGL scenes, such as Three.js
Skip it when
- Simple interface transitions in React, where Motion or CSS is simpler
GSAP pricing
Free
Free for all uses, including commercial work and every plugin, under Webflow's own GSAP licence (not an open-source licence).
GSAP pricing page (opens in a new tab)Approximate, checked September 2026.What the other tools cost
GSAP vs the alternatives
Related terms
More in Frontend
Motion