Framer Motion

Basic Animation

tsx
1import { motion } from 'framer-motion'
2
3function AnimatedBox() {
4  return (
5    <motion.div
6      initial={{ opacity: 0, y: 20 }}
7      animate={{ opacity: 1, y: 0 }}
8      transition={{ duration: 0.5 }}
9    >
10      Hello World
11    </motion.div>
12  )
13}

Animate Properties

tsx
1<motion.div
2  animate={{
3    x: 100,
4    y: 50,
5    scale: 1.2,
6    rotate: 180,
7    opacity: 0.5,
8    backgroundColor: '#ff0000',
9    borderRadius: '50%',
10  }}
11  transition={{
12    duration: 0.5,
13    ease: 'easeInOut',
14    delay: 0.2,
15  }}
16/>

Transition Types

tsx
1// Spring (default)
2transition={{ type: 'spring', stiffness: 100, damping: 10 }}
3
4// Tween
5transition={{ type: 'tween', duration: 0.5, ease: 'easeInOut' }}
6
7// Inertia
8transition={{ type: 'inertia', velocity: 50 }}
9
10// Ease presets
11ease: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'circIn' | 'circOut' | 'backIn' | 'backOut' | 'anticipate'

Variants

tsx
1const containerVariants = {
2  hidden: { opacity: 0 },
3  visible: {
4    opacity: 1,
5    transition: {
6      staggerChildren: 0.1,
7    },
8  },
9}
10
11const itemVariants = {
12  hidden: { opacity: 0, y: 20 },
13  visible: { opacity: 1, y: 0 },
14}
15
16function List({ items }) {
17  return (
18    <motion.ul
19      variants={containerVariants}
20      initial="hidden"
21      animate="visible"
22    >
23      {items.map((item) => (
24        <motion.li key={item.id} variants={itemVariants}>
25          {item.name}
26        </motion.li>
27      ))}
28    </motion.ul>
29  )
30}

Hover, Tap, Focus

tsx
1<motion.button
2  whileHover={{ scale: 1.05, backgroundColor: '#3b82f6' }}
3  whileTap={{ scale: 0.95 }}
4  whileFocus={{ boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.5)' }}
5>
6  Click me
7</motion.button>

Drag

tsx
1<motion.div
2  drag                    // Enable both axes
3  drag="x"                // Horizontal only
4  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
5  dragElastic={0.2}       // Elasticity outside constraints
6  dragMomentum={true}     // Continue after release
7  onDragStart={(e, info) => console.log(info.point)}
8  onDrag={(e, info) => console.log(info.delta)}
9  onDragEnd={(e, info) => console.log(info.velocity)}
10/>

Scroll Animations

tsx
1import { motion, useScroll, useTransform } from 'framer-motion'
2
3function ParallaxSection() {
4  const { scrollYProgress } = useScroll()
5  const y = useTransform(scrollYProgress, [0, 1], [0, -200])
6  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0.5, 0])
7
8  return (
9    <motion.div style={{ y, opacity }}>
10      Parallax Content
11    </motion.div>
12  )
13}
14
15// Scroll-triggered animation
16function ScrollTriggered() {
17  return (
18    <motion.div
19      initial={{ opacity: 0, y: 50 }}
20      whileInView={{ opacity: 1, y: 0 }}
21      viewport={{ once: true, margin: '-100px' }}
22      transition={{ duration: 0.6 }}
23    >
24      Appears on scroll
25    </motion.div>
26  )
27}

Layout Animations

tsx
1function LayoutExample() {
2  const [isExpanded, setIsExpanded] = useState(false)
3
4  return (
5    <motion.div
6      layout
7      onClick={() => setIsExpanded(!isExpanded)}
8      style={{
9        width: isExpanded ? 300 : 100,
10        height: isExpanded ? 200 : 100,
11      }}
12      transition={{ layout: { duration: 0.3 } }}
13    />
14  )
15}
16
17// Shared layout
18import { LayoutGroup } from 'framer-motion'
19
20function Tabs() {
21  const [selected, setSelected] = useState(0)
22
23  return (
24    <LayoutGroup>
25      {tabs.map((tab, i) => (
26        <button key={tab} onClick={() => setSelected(i)}>
27          {tab}
28          {selected === i && (
29            <motion.div layoutId="underline" className="underline" />
30          )}
31        </button>
32      ))}
33    </LayoutGroup>
34  )
35}

AnimatePresence (Exit Animations)

tsx
1import { AnimatePresence, motion } from 'framer-motion'
2
3function Modal({ isOpen, onClose }) {
4  return (
5    <AnimatePresence>
6      {isOpen && (
7        <motion.div
8          initial={{ opacity: 0, scale: 0.9 }}
9          animate={{ opacity: 1, scale: 1 }}
10          exit={{ opacity: 0, scale: 0.9 }}
11          transition={{ duration: 0.2 }}
12        >
13          <ModalContent onClose={onClose} />
14        </motion.div>
15      )}
16    </AnimatePresence>
17  )
18}

useAnimate Hook

tsx
1import { useAnimate } from 'framer-motion'
2
3function SequenceAnimation() {
4  const [scope, animate] = useAnimate()
5
6  const handleClick = async () => {
7    await animate(scope.current, { scale: 1.2 })
8    await animate(scope.current, { rotate: 180 })
9    await animate(scope.current, { scale: 1, rotate: 0 })
10  }
11
12  return (
13    <motion.div ref={scope} onClick={handleClick}>
14      Click for sequence
15    </motion.div>
16  )
17}

Motion Values

tsx
1import { motion, useMotionValue, useTransform } from 'framer-motion'
2
3function MotionValueExample() {
4  const x = useMotionValue(0)
5  const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0])
6  const background = useTransform(
7    x,
8    [-200, 0, 200],
9    ['#ff0000', '#00ff00', '#0000ff']
10  )
11
12  return (
13    <motion.div
14      drag="x"
15      style={{ x, opacity, background }}
16    />
17  )
18}

Stagger Children

tsx
1const container = {
2  hidden: { opacity: 0 },
3  show: {
4    opacity: 1,
5    transition: {
6      staggerChildren: 0.1,
7      delayChildren: 0.3,
8    },
9  },
10}
11
12const item = {
13  hidden: { opacity: 0, y: 20 },
14  show: { opacity: 1, y: 0 },
15}
16
17<motion.ul variants={container} initial="hidden" animate="show">
18  {items.map((i) => (
19    <motion.li key={i} variants={item} />
20  ))}
21</motion.ul>

Loading Skeleton

tsx
1function Skeleton() {
2  return (
3    <motion.div
4      animate={{ opacity: [0.5, 1, 0.5] }}
5      transition={{ duration: 1.5, repeat: Infinity }}
6      className="bg-gray-200 rounded h-4"
7    />
8  )
9}

Number Counter

tsx
1import { motion, useSpring, useTransform } from 'framer-motion'
2
3function Counter({ value }) {
4  const spring = useSpring(0, { stiffness: 100, damping: 30 })
5  const display = useTransform(spring, (v) => Math.round(v))
6
7  useEffect(() => {
8    spring.set(value)
9  }, [value, spring])
10
11  return <motion.span>{display}</motion.span>
12}