GSAP (GreenSock) — Web Animation Skill

When to use

• High-quality UI/motion design: entrances, micro-interactions, page transitions
• Timeline-based sequences (vs. scattered CSS transitions)
• Scroll-driven storytelling (with ScrollTrigger)
• Complex easing, staggering, orchestration across many elements

Key concepts & APIs

• Tweens:
  • gsap.to(targets, vars)
  • gsap.from(targets, vars)
  • gsap.fromTo(targets, fromVars, toVars)
• Timelines:
  • const tl = gsap.timeline({ defaults, repeat, yoyo, paused })
  • Chain: tl.to(...).from(...).addLabel('x').add(() => ...)
  • Position parameter: absolute 1.2, relative "+=0.5", overlap "-=0.3", label "intro"
• Eases: ease: "power2.out", "expo.inOut", "elastic.out(1, 0.3)"
• Staggers: stagger: 0.05 or { each, from: "start|center|end|random", grid }