GSAP (GreenSock Animation Platform)
Professional-grade JavaScript animation library. Industry standard for web animations. Timeline API for sequencing complex animations, ScrollTrigger for scroll-linked animations, MorphSVG for SVG morphing, and Flip plugin for layout animations. Works with React, Vue, vanilla JS. Used on award-winning websites and by major brands globally.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Animation library — no network access. Premium plugin license tokens must be kept private.
⚡ Reliability
Best When
Complex, precise, timeline-based web animations where CSS animations lack the control needed.
Avoid When
Simple transitions or physics-based animations — CSS or react-spring are more appropriate.
Use Cases
- • Create complex timeline-based animations with precise sequencing: gsap.timeline().from(), .to(), .add()
- • Implement scroll-triggered animations that react to scroll position using ScrollTrigger plugin
- • Morph SVG shapes between states using MorphSVGPlugin for icon and illustration animations
- • Build smooth page transitions and route change animations in React/Vue applications
- • Animate CSS grid and Flexbox layout changes with Flip plugin for seamless layout transitions
Not For
- • Simple transitions covered by CSS animations — GSAP adds JavaScript overhead for what CSS handles natively
- • Physics-based spring animations — use react-spring or Framer Motion for natural spring dynamics
- • CSS-only projects — GSAP requires JavaScript; for CSS-only animation use @keyframes
Interface
Authentication
Animation library — no auth needed. Some plugins (MorphSVGPlugin, SplitText) require GSAP Club subscription.
Pricing
Core plugins are free for commercial use. Premium plugins via club.greensock.com subscription. Licensing must be verified for commercial use of premium plugins.
Agent Metadata
Known Gotchas
- ⚠ Premium plugins (MorphSVGPlugin, SplitText) require GSAP Club license — don't include them in open source projects without proper licensing
- ⚠ ScrollTrigger must be registered: gsap.registerPlugin(ScrollTrigger) — forgetting registration causes silent failure with no scroll animations
- ⚠ React StrictMode causes animations to run twice in development — use useLayoutEffect (not useEffect) and clean up with gsap.context().revert() to prevent duplicate animations
- ⚠ GSAP targets must exist in DOM before animation — refs must be attached before useLayoutEffect/useEffect runs the animation
- ⚠ timeline().to() default position is 'append' — all tweens run sequentially by default; use '<' or offsets for overlapping animations
- ⚠ ScrollTrigger markers (markers: true) must be removed in production — they're visible overlay lines useful for debugging but ugly in production
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for GSAP (GreenSock Animation Platform).
Scores are editorial opinions as of 2026-03-06.