gsap
the timeline conductor
gsap problems are almost always scope problems: which tween, which timeline, which trigger, and who cleans it up. reach for the guide that owns the mechanism instead of guessing options from memory. prefer transforms over layout properties by default, and always think about cleanup inside component frameworks.
sequences, not scatterscroll that respects the readercleans up on unmount
Use for any GSAP animation work -- core tweens and easing, timelines and sequencing, ScrollTrigger (scroll-linked, pinning, scrub, parallax), plugins (Flip, Draggable, ScrollSmoother, SplitText, Observer, CustomEase), React integration (useGSAP, cleanup), Vue/Svelte/other frameworks, gsap.utils helpers, or animation performance and jank.
methodology
- classify the mechanism: tween core, timeline sequencing, scroll behavior, plugin, framework wiring, utils, or performance.
- read the matching guide below; each guide is verbatim official source.
- register plugins once, scope animation with
gsap.matchMedia()for responsive and reduced-motion needs, and clean up in frameworks. - profile before optimizing -- confirm the jank source before applying performance rules.
contents
- trainedlearned layer -- read first
- gsap-corecore tweens -- gsap.to/from/fromTo, easing, duration, stagger, defaults, gsap.matchMedia
- gsap-timelinesequencing and choreography -- gsap.timeline, position parameter, nesting, playback control
- gsap-scrolltriggerscroll-driven animation -- ScrollTrigger, pinning, scrub, parallax
- gsap-pluginsplugins -- registration, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, CustomEase, GSDevTools
- gsap-reactReact or Next.js -- useGSAP hook, refs, gsap.context, cleanup on unmount
- gsap-frameworksVue, Nuxt, Svelte, SvelteKit, or other non-React frameworks -- lifecycle, scoping selectors, cleanup
- gsap-utilsgsap.utils -- clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe
- gsap-performanceperformance -- transforms over layout, thrashing, will-change, batching, jank, 60fps