frontend-animation

Trigger: Use when "GSAP", "Framer Motion", "Lottie", "Three.js", "frontend animation". Animation library selection and implementation with React patterns.

Quick Install Reference

GSAP (Default Choice — Covers 90% of Cases)

npm install gsap @gsap/react

Use when: Any animation need. Transforms, SVG, scroll-triggered, timelines, morphing, dragging, text effects. Works with: React, Next.js, Vue, Svelte, vanilla JS — anything. Cost: 100% free (all plugins, commercial use included).

Core import:

import gsap from "gsap"
import { useGSAP } from "@gsap/react"  // React only

GSAP Plugin Cheat Sheet: | Plugin | What it does | |--------|-------------| | ScrollTrigger | Trigger animations on scroll position | | Flip | Animate layout changes (grid to list, reorder) | | TextPlugin | Typewriter / text replacement animation | | ScrambleTextPlugin | Decode text from random characters | | SplitText | Split text into chars/words/lines, animate each | | MotionPathPlugin | Animate along a curved SVG path | | DrawSVGPlugin | Progressively draw SVG strokes | | MorphSVGPlugin | Morph one SVG shape into another | | Draggable | Make elements draggable with momentum | | CustomEase | Design custom easing curves | | Observer | Watch scroll/touch/pointer without ScrollTrigger | | ScrollSmoother | Smooth scrolling wrapper (full page) | | ScrollToPlugin | Animated scroll-to-element | | InertiaPlugin | Momentum-based animation (throw/flick) |

Register plugins once at app root: gsap.registerPlugin(ScrollTrigger, Flip, TextPlugin, ...)

Framer Motion (React-Only Alternative)

npm install framer-motion

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).

AutoAnimate (Zero-Config)

npm install @formkit/auto-animate

Use when: List reorders, adds, removes animate automatically with ONE line. No config. Pairs well with GSAP (AutoAnimate handles lists, GSAP handles everything else).

Lottie (Designer-Made Animations)

npm install lottie-web
# or for React: npm install lottie-react

Use when: Playing pre-made animations (confetti, checkmarks, loading spinners, celebrations). Source: lottiefiles.com

Three.js / React Three Fiber (3D)

npm install three @react-three/fiber @react-three/drei

Use when: 3D scenes, WebGL, particle systems, 3D product viewers. Skip for standard UI animations (overkill).

GSAP React Pattern (useGSAP)

Always use useGSAP instead of useEffect for GSAP in React. It auto-cleans up tweens on unmount.

import gsap from "gsap"
import { useGSAP } from "@gsap/react"
import { useRef } from "react"

function Component() {
  const container = useRef(null)

  useGSAP(() => {
    gsap.from(".box", { opacity: 0, y: 20, stagger: 0.1 })
  }, { scope: container }) // scopes selectors to this container

  return (
    <div ref={container}>
      <div className="box">A</div>
      <div className="box">B</div>
    </div>
  )
}

Standard Animation Stack

At the start of any new project that needs animation:

1. Always install GSAP — it's free and covers everything
2. Add AutoAnimate if the app has lists/reorderable items
3. Add Lottie if you want celebration/reward animations

# Standard animation stack
npm install gsap @gsap/react

# Full animation stack (lists + celebrations)
npm install gsap @gsap/react @formkit/auto-animate lottie-react

Decision Matrix

| Need | Use This | |------|----------| | General animation (default) | GSAP | | Scroll-triggered effects | GSAP ScrollTrigger | | Layout/reorder animation | GSAP Flip or AutoAnimate | | Page/route transitions | GSAP or Framer Motion | | SVG drawing/morphing | GSAP DrawSVG + MorphSVG | | Text reveal effects | GSAP SplitText + TextPlugin | | Drag and drop feel | GSAP Draggable | | Pre-made celebration animations | Lottie | | Auto-animate lists (zero effort) | AutoAnimate | | 3D scenes | Three.js / R3F | | Simple hover/fade only | CSS / Tailwind |