{"slug":"frontend-animation","title":"frontend-animation","tags":["site-building","frontend","frontend","animation"],"agent_summary":"Quick Install Reference GSAP (Default Choice — Covers 90% of Cases) bash npm install gsap @gsap/react Use when: Any animation need","trigger_phrases":["frontend-animation","frontend guide","animation guide","gsap","framer motion","lottie","three.js","frontend animation"],"runnable":true,"markdown":"**Trigger:** Use when \"GSAP\", \"Framer Motion\", \"Lottie\", \"Three.js\", \"frontend animation\". Animation library selection and implementation with React patterns.\n\n### Quick Install Reference\n\n**GSAP (Default Choice — Covers 90% of Cases)**\n```bash\nnpm install gsap @gsap/react\n```\nUse when: Any animation need. Transforms, SVG, scroll-triggered, timelines, morphing, dragging, text effects.\nWorks with: React, Next.js, Vue, Svelte, vanilla JS — anything.\nCost: 100% free (all plugins, commercial use included).\n\n**Core import:**\n```tsx\nimport gsap from \"gsap\"\nimport { useGSAP } from \"@gsap/react\"  // React only\n```\n\n**GSAP Plugin Cheat Sheet:**\n| Plugin | What it does |\n|--------|-------------|\n| ScrollTrigger | Trigger animations on scroll position |\n| Flip | Animate layout changes (grid to list, reorder) |\n| TextPlugin | Typewriter / text replacement animation |\n| ScrambleTextPlugin | Decode text from random characters |\n| SplitText | Split text into chars/words/lines, animate each |\n| MotionPathPlugin | Animate along a curved SVG path |\n| DrawSVGPlugin | Progressively draw SVG strokes |\n| MorphSVGPlugin | Morph one SVG shape into another |\n| Draggable | Make elements draggable with momentum |\n| CustomEase | Design custom easing curves |\n| Observer | Watch scroll/touch/pointer without ScrollTrigger |\n| ScrollSmoother | Smooth scrolling wrapper (full page) |\n| ScrollToPlugin | Animated scroll-to-element |\n| InertiaPlugin | Momentum-based animation (throw/flick) |\n\nRegister plugins once at app root: `gsap.registerPlugin(ScrollTrigger, Flip, TextPlugin, ...)`\n\n**Framer Motion (React-Only Alternative)**\n```bash\nnpm install framer-motion\n```\nUse when: React project wanting declarative animations. Layout animations, page transitions, gesture-based UI, exit animations (AnimatePresence). Don't use with GSAP in the same project (paradigm conflict).\n\n**AutoAnimate (Zero-Config)**\n```bash\nnpm install @formkit/auto-animate\n```\nUse when: List reorders, adds, removes animate automatically with ONE line. No config. Pairs well with GSAP (AutoAnimate handles lists, GSAP handles everything else).\n\n**Lottie (Designer-Made Animations)**\n```bash\nnpm install lottie-web\n# or for React: npm install lottie-react\n```\nUse when: Playing pre-made animations (confetti, checkmarks, loading spinners, celebrations). Source: lottiefiles.com\n\n**Three.js / React Three Fiber (3D)**\n```bash\nnpm install three @react-three/fiber @react-three/drei\n```\nUse when: 3D scenes, WebGL, particle systems, 3D product viewers. Skip for standard UI animations (overkill).\n\n### GSAP React Pattern (useGSAP)\n\nAlways use `useGSAP` instead of `useEffect` for GSAP in React. It auto-cleans up tweens on unmount.\n\n```tsx\nimport gsap from \"gsap\"\nimport { useGSAP } from \"@gsap/react\"\nimport { useRef } from \"react\"\n\nfunction Component() {\n  const container = useRef(null)\n\n  useGSAP(() => {\n    gsap.from(\".box\", { opacity: 0, y: 20, stagger: 0.1 })\n  }, { scope: container }) // scopes selectors to this container\n\n  return (\n    <div ref={container}>\n      <div className=\"box\">A</div>\n      <div className=\"box\">B</div>\n    </div>\n  )\n}\n```\n\n### Standard Animation Stack\n\nAt the start of any new project that needs animation:\n1. Always install GSAP — it's free and covers everything\n2. Add AutoAnimate if the app has lists/reorderable items\n3. Add Lottie if you want celebration/reward animations\n\n```bash\n# Standard animation stack\nnpm install gsap @gsap/react\n\n# Full animation stack (lists + celebrations)\nnpm install gsap @gsap/react @formkit/auto-animate lottie-react\n```\n\n### Decision Matrix\n\n| Need | Use This |\n|------|----------|\n| General animation (default) | GSAP |\n| Scroll-triggered effects | GSAP ScrollTrigger |\n| Layout/reorder animation | GSAP Flip or AutoAnimate |\n| Page/route transitions | GSAP or Framer Motion |\n| SVG drawing/morphing | GSAP DrawSVG + MorphSVG |\n| Text reveal effects | GSAP SplitText + TextPlugin |\n| Drag and drop feel | GSAP Draggable |\n| Pre-made celebration animations | Lottie |\n| Auto-animate lists (zero effort) | AutoAnimate |\n| 3D scenes | Three.js / R3F |\n| Simple hover/fade only | CSS / Tailwind |\n\n---\n","html":"<p><strong>Trigger:</strong> Use when \"GSAP\", \"Framer Motion\", \"Lottie\", \"Three.js\", \"frontend animation\". Animation library selection and implementation with React patterns.</p>\n<h3>Quick Install Reference</h3>\n<p><strong>GSAP (Default Choice — Covers 90% of Cases)</strong></p>\n<pre><code class=\"language-bash\">npm install gsap @gsap/react\n</code></pre>\n<p>Use when: Any animation need. Transforms, SVG, scroll-triggered, timelines, morphing, dragging, text effects.\nWorks with: React, Next.js, Vue, Svelte, vanilla JS — anything.\nCost: 100% free (all plugins, commercial use included).</p>\n<p><strong>Core import:</strong></p>\n<pre><code class=\"language-tsx\">import gsap from \"gsap\"\nimport { useGSAP } from \"@gsap/react\"  // React only\n</code></pre>\n<p><strong>GSAP Plugin Cheat Sheet:</strong>\n| Plugin | What it does |\n|--------|-------------|\n| ScrollTrigger | Trigger animations on scroll position |\n| Flip | Animate layout changes (grid to list, reorder) |\n| TextPlugin | Typewriter / text replacement animation |\n| ScrambleTextPlugin | Decode text from random characters |\n| SplitText | Split text into chars/words/lines, animate each |\n| MotionPathPlugin | Animate along a curved SVG path |\n| DrawSVGPlugin | Progressively draw SVG strokes |\n| MorphSVGPlugin | Morph one SVG shape into another |\n| Draggable | Make elements draggable with momentum |\n| CustomEase | Design custom easing curves |\n| Observer | Watch scroll/touch/pointer without ScrollTrigger |\n| ScrollSmoother | Smooth scrolling wrapper (full page) |\n| ScrollToPlugin | Animated scroll-to-element |\n| InertiaPlugin | Momentum-based animation (throw/flick) |</p>\n<p>Register plugins once at app root: <code>gsap.registerPlugin(ScrollTrigger, Flip, TextPlugin, ...)</code></p>\n<p><strong>Framer Motion (React-Only Alternative)</strong></p>\n<pre><code class=\"language-bash\">npm install framer-motion\n</code></pre>\n<p>Use when: React project wanting declarative animations. Layout animations, page transitions, gesture-based UI, exit animations (AnimatePresence). Don't use with GSAP in the same project (paradigm conflict).</p>\n<p><strong>AutoAnimate (Zero-Config)</strong></p>\n<pre><code class=\"language-bash\">npm install @formkit/auto-animate\n</code></pre>\n<p>Use when: List reorders, adds, removes animate automatically with ONE line. No config. Pairs well with GSAP (AutoAnimate handles lists, GSAP handles everything else).</p>\n<p><strong>Lottie (Designer-Made Animations)</strong></p>\n<pre><code class=\"language-bash\">npm install lottie-web\n# or for React: npm install lottie-react\n</code></pre>\n<p>Use when: Playing pre-made animations (confetti, checkmarks, loading spinners, celebrations). Source: lottiefiles.com</p>\n<p><strong>Three.js / React Three Fiber (3D)</strong></p>\n<pre><code class=\"language-bash\">npm install three @react-three/fiber @react-three/drei\n</code></pre>\n<p>Use when: 3D scenes, WebGL, particle systems, 3D product viewers. Skip for standard UI animations (overkill).</p>\n<h3>GSAP React Pattern (useGSAP)</h3>\n<p>Always use <code>useGSAP</code> instead of <code>useEffect</code> for GSAP in React. It auto-cleans up tweens on unmount.</p>\n<pre><code class=\"language-tsx\">import gsap from \"gsap\"\nimport { useGSAP } from \"@gsap/react\"\nimport { useRef } from \"react\"\n\nfunction Component() {\n  const container = useRef(null)\n\n  useGSAP(() => {\n    gsap.from(\".box\", { opacity: 0, y: 20, stagger: 0.1 })\n  }, { scope: container }) // scopes selectors to this container\n\n  return (\n    &#x3C;div ref={container}>\n      &#x3C;div className=\"box\">A&#x3C;/div>\n      &#x3C;div className=\"box\">B&#x3C;/div>\n    &#x3C;/div>\n  )\n}\n</code></pre>\n<h3>Standard Animation Stack</h3>\n<p>At the start of any new project that needs animation:</p>\n<ol>\n<li>Always install GSAP — it's free and covers everything</li>\n<li>Add AutoAnimate if the app has lists/reorderable items</li>\n<li>Add Lottie if you want celebration/reward animations</li>\n</ol>\n<pre><code class=\"language-bash\"># Standard animation stack\nnpm install gsap @gsap/react\n\n# Full animation stack (lists + celebrations)\nnpm install gsap @gsap/react @formkit/auto-animate lottie-react\n</code></pre>\n<h3>Decision Matrix</h3>\n<p>| Need | Use This |\n|------|----------|\n| General animation (default) | GSAP |\n| Scroll-triggered effects | GSAP ScrollTrigger |\n| Layout/reorder animation | GSAP Flip or AutoAnimate |\n| Page/route transitions | GSAP or Framer Motion |\n| SVG drawing/morphing | GSAP DrawSVG + MorphSVG |\n| Text reveal effects | GSAP SplitText + TextPlugin |\n| Drag and drop feel | GSAP Draggable |\n| Pre-made celebration animations | Lottie |\n| Auto-animate lists (zero effort) | AutoAnimate |\n| 3D scenes | Three.js / R3F |\n| Simple hover/fade only | CSS / Tailwind |</p>\n<hr>\n"}