Animation Tools

Tool selection guide and implementation patterns.

Tool Comparison

Selection Decision Tree

Is it a simple hover/transition?
  → CSS

Is it a pre-designed animation from After Effects?
  → Lottie

Does it need complex state logic?
  → Rive

Is it a complex sequence with precise timing?
  → GSAP

Is it a React app with declarative needs?
  → Framer Motion

Do you need smallest bundle size?
  → Motion One or CSS

Are you rendering video?
  → Remotion

Implementation Examples

CSS (Simple Transitions)

.button {
  transition:
    transform 200ms cubic-bezier(0.2, 0, 0, 1),
    opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.button:hover {
  transform: scale(1.05);
}

GSAP (Complex Sequences)

import gsap from 'gsap';

const tl = gsap.timeline();
tl.from('.title', { opacity: 0, y: 20, duration: 0.3, ease: 'power2.out' })
  .from('.subtitle', { opacity: 0, y: 20, duration: 0.3, ease: 'power2.out' }, '-=0.1')
  .from('.cta', { opacity: 0, scale: 0.9, duration: 0.3, ease: 'back.out(1.7)' }, '-=0.1');

Framer Motion (React)

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence>
  {isVisible && (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.25, ease: [0.05, 0.7, 0.1, 1] }}
    />
  )}
</AnimatePresence>

Motion One (Lightweight)

import { animate } from 'motion';

animate('.element',
  { opacity: [0, 1], y: [20, 0] },
  { duration: 0.25, easing: [0.05, 0.7, 0.1, 1] }
);

See references/gsap.md for GSAP deep dive. See references/framer-motion.md for Framer Motion patterns. See references/rive.md for Rive state machines.