gsaplisted

# GSAP — Animation Engine ## When to use GSAP | Criteria | CSS Transitions | Framer Motion | GSAP | | --------------------- | --------------- | ------------- | ----------------- | | Hover / simple toggle | Yes | Yes | Overkill | | Sequenced timeline | No | Limited | **Yes** | | Scroll-driven | scroll-timeline | Limited | **ScrollTrigger** | | Complex stagger | No | Basic | **Distribution** | | Mobile perf (60fps) | Good | Average | **Excellent** | | Text splitting | No | No | **SplitText** | | SVG morph / draw | No | No | **MorphSVG** | | Bundle size concern | 0kb | ~30kb | ~25kb + plugins | **Rule**: if the animation needs timeline, scroll-link, or distributed stagger, use GSAP. Otherwise CSS first. ## Setup ```js // Always register plugins at the top level import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { SplitText } from "gsap/SplitText"; gsap.registerPlugin(ScrollTrigger, SplitText); ``` React: use `useGSAP()` from the `@gsap/react` package instead of `useEffect` + manual cleanup. ```jsx import { useGSAP } from "@gsap/react"; useGSAP(() => { gsap.to(".box", { x: 200 }); }, { scope: containerRef }); // auto-cleanup, auto-revert ``` ## Core Patterns ### defaults{} to avoid repetition