# GSAP — Professional-Grade Animation Platform for the Web

> A robust JavaScript animation library used on millions of sites, providing high-performance tweens, timelines, and scroll-driven animations with broad browser compatibility.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# GSAP — Professional-Grade Animation Platform for the Web

## Quick Use
```bash
npm install gsap
```
```javascript
import gsap from 'gsap';
gsap.to('.box', { x: 200, rotation: 360, duration: 1 });
```

## 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/

---
Source: https://tokrepo.com/en/workflows/gsap-professional-grade-animation-platform-web-2c9e94d5
Author: AI Open Source