--- name: framer-motion description: Framer Motion animations - motion components, variants, gestures, layout animations. Use when adding UI animations, transitions, or interactive motion effects. --- # Framer Motion ## Basic Animation ```tsx import { motion } from 'framer-motion' function AnimatedBox() { return ( Hello World ) } ``` ## Animate Properties ```tsx ``` ## Transition Types ```tsx // Spring (default) transition={{ type: 'spring', stiffness: 100, damping: 10 }} // Tween transition={{ type: 'tween', duration: 0.5, ease: 'easeInOut' }} // Inertia transition={{ type: 'inertia', velocity: 50 }} // Ease presets ease: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'circIn' | 'circOut' | 'backIn' | 'backOut' | 'anticipate' ``` ## Variants ```tsx const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, } function List({ items }) { return ( {items.map((item) => ( {item.name} ))} ) } ``` ## Hover, Tap, Focus ```tsx Click me ``` ## Drag ```tsx console.log(info.point)} onDrag={(e, info) => console.log(info.delta)} onDragEnd={(e, info) => console.log(info.velocity)} /> ``` ## Scroll Animations ```tsx import { motion, useScroll, useTransform } from 'framer-motion' function ParallaxSection() { const { scrollYProgress } = useScroll() const y = useTransform(scrollYProgress, [0, 1], [0, -200]) const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0.5, 0]) return ( Parallax Content ) } // Scroll-triggered animation function ScrollTriggered() { return ( Appears on scroll ) } ``` ## Layout Animations ```tsx function LayoutExample() { const [isExpanded, setIsExpanded] = useState(false) return ( setIsExpanded(!isExpanded)} style={{ width: isExpanded ? 300 : 100, height: isExpanded ? 200 : 100, }} transition={{ layout: { duration: 0.3 } }} /> ) } // Shared layout import { LayoutGroup } from 'framer-motion' function Tabs() { const [selected, setSelected] = useState(0) return ( {tabs.map((tab, i) => ( ))} ) } ``` ## AnimatePresence (Exit Animations) ```tsx import { AnimatePresence, motion } from 'framer-motion' function Modal({ isOpen, onClose }) { return ( {isOpen && ( )} ) } ``` ## useAnimate Hook ```tsx import { useAnimate } from 'framer-motion' function SequenceAnimation() { const [scope, animate] = useAnimate() const handleClick = async () => { await animate(scope.current, { scale: 1.2 }) await animate(scope.current, { rotate: 180 }) await animate(scope.current, { scale: 1, rotate: 0 }) } return ( Click for sequence ) } ``` ## Motion Values ```tsx import { motion, useMotionValue, useTransform } from 'framer-motion' function MotionValueExample() { const x = useMotionValue(0) const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0]) const background = useTransform( x, [-200, 0, 200], ['#ff0000', '#00ff00', '#0000ff'] ) return ( ) } ``` ## Stagger Children ```tsx const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.3, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, } {items.map((i) => ( ))} ``` ## Loading Skeleton ```tsx function Skeleton() { return ( ) } ``` ## Number Counter ```tsx import { motion, useSpring, useTransform } from 'framer-motion' function Counter({ value }) { const spring = useSpring(0, { stiffness: 100, damping: 30 }) const display = useTransform(spring, (v) => Math.round(v)) useEffect(() => { spring.set(value) }, [value, spring]) return {display} } ```

framer-motion

Scan your own AI components