Framer Motion

Framer Motion Skill Guide

Objective

Deliver meaningful UI motion that improves clarity and feedback without degrading accessibility or performance.

1) Setup and Baseline

npm i framer-motion

• Import from framer-motion and use motion.* wrappers selectively.
• Respect user preference with useReducedMotion and reduced-motion variants.
• Define shared transitions in a small motion config module for consistency.

2) Motion Principles

• Animate for meaning: state change, hierarchy, feedback, orientation.
• Keep durations tight (typically 120ms to 320ms) for UI interactions.
• Favour opacity/transform animations; avoid expensive layout thrashing.
• Use spring transitions for tactile micro-interactions and tween for deterministic sequencing.

3) Core Animation Patterns

Staggered Reveal

import { motion } from 'framer-motion'

const list = {
  hidden: {},
  show: {
    transition: { staggerChildren: 0.06, delayChildren: 0.04 },
  },
}
const item = {
  hidden: { opacity: 0, y: 8 },
  show:   { opacity: 1, y: 0, transition: { duration: 0.2 } },
}

export function StaggeredList({ items }: { items: string[] }) {
  return (
    <motion.ul initial="hidden" animate="show" variants={list} className="space-y-2">
      {items.map((label) => (
        <motion.li key={label} variants={item} className="rounded border p-3">
          {label}
        </motion.li>
      ))}
    </motion.ul>
  )
}

Exit Transitions with AnimatePresence

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

export function Toast({ open, message }: { open: boolean; message: string }) {
  return (
    <AnimatePresence mode="wait">
      {open ? (
        <motion.div
          key="toast"
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 8 }}
          transition={{ duration: 0.18 }}
          className="rounded-md bg-slate-900 px-4 py-2 text-white"
        >
          {message}
        </motion.div>
      ) : null}
    </AnimatePresence>
  )
}