GSAP: The Professional's Animation Toolkit — Quick Reference

The Three Pillars of Every GSAP Project

GSAP remains the gold standard for high-performance web animations. Every GSAP project is built on three pillars:

1. Tweens — gsap.to() / gsap.from() / gsap.fromTo() for single-element animations
2. Timelines — gsap.timeline() for sequenced multi-step choreography
3. ScrollTrigger — scroll-linked effects with pinning, scrubbing, and callbacks

// Staggered entrance animation
gsap.from(".card", {
  opacity: 0,
  y: 40,
  duration: 0.6,
  stagger: 0.1,
  ease: "power3.out",
  scrollTrigger: { trigger: ".cards-container", start: "top 80%" },
});

Plugin Ecosystem

• Draggable — drag, spin, and throw interactions
• MorphSVG — smooth SVG path morphing
• SplitText — character and word-level text animations
• Flip — FLIP technique for layout transitions

The context() API introduced in GSAP 3.11 ensures clean React integration with automatic cleanup on unmount.