gsap

name	gsap
description	Animation guidance for the AMC web repo — when to use GSAP vs CSS/Svelte transitions. Read before adding animations.

GSAP

• GSAP is reserved for timeline-style choreography — multi-step, scripted animation sequences (see src/routes/championship/+page.svelte).
• Simple transitions should use CSS/UnoCSS classes or Svelte's built-in transitions instead — don't pull GSAP into a component for a fade or slide.
• Respect reduced motion: check prefersReducedMotion from svelte/motion before running decorative animations (the map wrapper already does this — follow that pattern).
• Use $lib/tw-var's defaultTransitionDurationMs (and cssTransitionToMs from src/lib/utils/) to keep JS-driven timing consistent with CSS.

Related: [[codebase-patterns]], [[lottie]]