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.