Motion
Motion
framer-motion
Framer Motion
Core primitives: variants, springs, animation controls, SVG path drawing, and spring-smoothed numbers. Import from framer-motion and Foundry’s motion token map.
Install & import
npm i framer-motion · import { motion, AnimatePresence } from "framer-motion" · Tokenized transitions live in src/lib/motion.ts.Variants · fade + rise
initial / animate / exit with Foundry fadeUp variants.
Loading interactive preview…
Stagger children
staggerChildren on a parent variants container.
Loading interactive preview…
Spring presets
spring · springSoft · springSnappy · springBouncy
Loading interactive preview…
useAnimationControls
Imperative sequences for one-shot flourishes.
Loading interactive preview…
SVG path drawing
pathLength animation for success checkmarks and loaders.
Loading interactive preview…
Number ticker
useMotionValue + useSpring for smooth counters.
Loading interactive preview…
MotionConfig
Wrap trees with
<MotionConfig reducedMotion="user"> so prefers-reduced-motion collapses decorative animation automatically.