Animation Skill

Animation Skill

You are an expert in creating world-class, premium animations for React applications using Motion (motion.dev), the modern animation library for React.

Installation

npm install motion

Import from "motion/​react":

import { motion } from "motion/​react";

---

Core Concepts

1. The <motion /> Component

The foundation of all animations in Motion. It's a React component that wraps any HTML or SVG element and supercharges it with animation capabilities.

Basic Usage:

<motion.div animate={{ x: 100 }} />
<motion.button whileHover={{ scale: 1.1 }} />
<motion.svg whileTap={{ rotate: 90 }} />

Key Props:

• initial: Starting visual state (can be an object, variant name, or false to disable enter animation)
• animate: Target state to animate to
• exit: State to animate to when removed from DOM (requires <AnimatePresence>)
• transition: Customize animation timing and easing
• variants: Reusable animation states
• style: React style prop with support for MotionValues

---

Animation Types

2. Enter Animations

Components automatically animate to animate values when they mount.

<motion.div initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} />

Disable enter animation:

<motion.div initial={false} animate={{ opacity: 1 }} />

---

3. Gesture Animations

Motion provides declarative gesture handlers that feel better than CSS or plain JavaScript events.

Hover

<motion.button
  whileHover={{ scale: 1.1, backgroundColor: "#ff0000" }}
  transition={{ duration: 0.2 }}
/>

Tap/​Press

<motion.button
  whileTap={{ scale: 0.95 }}
  onTap={() => console.log("Tapped!")}
/>

Focus

<motion.input whileFocus={{ borderColor: "#0099ff" }} />

Drag

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  whileDrag={{ scale: 1.1 }}
/>

Drag Options:

• drag={true}: Drag in all directions
• drag="x": Horizontal only
• drag="y": Vertical only
• dragConstraints: Limits (object or ref to container)
• dragElastic: Elasticity when out of bounds (0-1, default: 0.5)
• dragMomentum: Enable momentum on release (default: true)

---

4. Scroll Animations

Scroll-Triggered (whileInView)

Animate when element enters viewport:

<motion.div
  initial={{ opacity: 0, y: 100 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.5 }}
/>

viewport options:

• once: Only trigger once (default: false)
• amount: How much of element must be visible ("some", "all", or 0-1)
• margin: Offset from viewport edges
• root: Custom scroll container

Scroll-Linked (useScroll)

Link animations directly to scroll position:

const { scrollYProgress } = useScroll();

return <motion.div style={{ scaleX: scrollYProgress }} />;

useScroll returns:

• scrollX, scrollY: Scroll offset in pixels
• scrollXProgress, scrollYProgress: Scroll progress (0-1)

Advanced scroll tracking:

const { scrollYProgress } = useScroll({
  target: ref, // Element to track
  offset: ["start end", "end start"], // When to start/​end
});

---

5. Layout Animations

Motion uses FLIP (First, Last, Invert, Play) to animate layout changes using performant transforms.

Simple Layout Animation

<motion.div layout />

Shared Element Transitions

{
  isExpanded ? <motion.div layoutId="card" /> : <motion.div layoutId="card" />;
}

Layout Props:

• layout: Animate size and position changes
• layoutId: Shared element transitions between components
• layoutDependency: Force recalculation on value change
• layoutScroll: Animate within scrollable containers

Performance Note: Layout animations run at 60fps by animating transforms, not layout properties.

---

6. Exit Animations

Wrap components with <AnimatePresence> to enable exit animations:

<AnimatePresence mode="wait">
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</​AnimatePresence>

AnimatePresence Props:

• mode: "sync" (default), "wait", "popLayout"
• initial: Disable initial animations (default: true)
• onExitComplete: Callback when all exit animations complete

---

7. SVG Animations

Motion supports SVG-specific animations:

// Line drawing
<motion.path
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
/>

// Morphing (same number of points)
<motion.path
  animate={{ d: "M10,10 L20,20 ..." }}
/>

// Attributes
<motion.circle
  animate={{
    cx: 50,
    r: 20,
    fill: "#ff0000"
  }}
/>

---

Advanced Features

8. Variants

Reusable animation states with propagation and orchestration:

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      delay: 0.2,
      when: "beforeChildren",
      staggerChildren: 0.1,
    },
  },
};

<motion.ul variants={variants} initial="hidden" animate="visible">
  <motion.li variants={variants} />
  <motion.li variants={variants} />
</​motion.ul>;

Variant Orchestration:

• when: "beforeChildren", "afterChildren"
• staggerChildren: Delay between child animations
• delayChildren: Delay before first child
• staggerDirection: 1 (forward) or -1 (backward)

Dynamic Variants:

const variants = {
  visible: (i) => ({
    opacity: 1,
    transition: { delay: i * 0.1 },
  }),
};

<motion.div custom={index} variants={variants} />;

---

9. Transitions

Configure animation timing and behavior:

Tween (Time-based)

<motion.div
  animate={{ x: 100 }}
  transition={{
    duration: 0.5,
    ease: "easeInOut", // or [.17,.67,.83,.67] for cubic-bezier
  }}
/>

Easing options: "linear", "easeIn", "easeOut", "easeInOut", "circIn", "circOut", "circInOut", "backIn", "backOut", "backInOut", "anticipate"

Spring (Physics-based)

<motion.div
  animate={{ x: 100 }}
  transition={{
    type: "spring",
    stiffness: 100,
    damping: 10,
    mass: 1,
  }}
/>

Spring Presets:

• bounce: 0.25: Natural feel (default)
• bounce: 0: No bounce
• bounce: 0.6: Very bouncy

Or use duration with bounce:

transition={{ duration: 0.8, bounce: 0.3 }}

Keyframes

<motion.div
  animate={{
    x: [0, 100, 0],
    backgroundColor: ["#ff0000", "#00ff00", "#0000ff"],
  }}
  transition={{
    duration: 2,
    times: [0, 0.5, 1], // Optional: control keyframe timing
    ease: ["easeIn", "easeOut"], // Different easing per segment
  }}
/>

---

10. Motion Values

Track and compose values without triggering re-renders:

const x = useMotionValue(0);
const opacity = useTransform(x, [0, 100], [1, 0]);

return <motion.div style={{ x, opacity }} />;

Key Hooks:

useMotionValue

const x = useMotionValue(0);
x.set(100); // Update without re-render
x.get(); // Get current value

useTransform

// Map one range to another
const y = useTransform(scrollY, [0, 300], [0, 100]);

// Custom function
const color = useTransform(x, (latest) =>
  latest > 50 ? "#ff0000" : "#0000ff",
);

useSpring

const x = useMotionValue(0);
const smoothX = useSpring(x, {
  stiffness: 100,
  damping: 20,
});

useScroll

const { scrollYProgress } = useScroll({
  target: containerRef,
  offset: ["start start", "end end"],
});

useInView

const ref = useRef(null);
const isInView = useInView(ref, {
  once: true,
  amount: 0.5,
});

useVelocity

const x = useMotionValue(0);
const xVelocity = useVelocity(x);

---

Premium Components

11. AnimateNumber

Animate number changes with layout animations:

import { AnimateNumber } from "motion/​react";

<AnimateNumber value={count} transition={{ duration: 0.5 }} />;

---

12. Carousel

Production-ready carousel with infinite scrolling:

import { Carousel } from "motion/​react";

<Carousel.Root loop>
  <Carousel.Viewport>
    {items.map((item) => (
      <Carousel.Item key={item.id}>{item.content}</​Carousel.Item>
    ))}
  </​Carousel.Viewport>
  <Carousel.Controls />
</​Carousel.Root>;

---

13. Cursor

Custom cursor with auto-adaptation to interactive elements:

import { Cursor } from "motion/​react";

<Cursor className="custom-cursor" />;

---

14. Ticker

Infinite scrolling marquee:

import { Ticker } from "motion/​react";

<Ticker speed={50}>
  <div>Scrolling content...</​div>
</​Ticker>;

---

15. Typewriter

Realistic typing animation:

import { Typewriter } from "motion/​react";

<Typewriter text="Hello, world!" speed={50} />;

---

16. Reorder

Drag-to-reorder lists:

import { Reorder } from "motion/​react";

<Reorder.Group values={items} onReorder={setItems}>
  {items.map((item) => (
    <Reorder.Item key={item} value={item}>
      {item}
    </​Reorder.Item>
  ))}
</​Reorder.Group>;

---

Performance & Optimization

17. LazyMotion

Reduce bundle size by loading features on demand:

import { LazyMotion, domAnimation } from "motion/​react";

<LazyMotion features={domAnimation} strict>
  <App />
</​LazyMotion>;

Features:

• domAnimation: ~30kb (gestures, drag, layout)
• domMax: ~60kb (all features)
• Async loading: features={() => import('./​features')}

---

18. MotionConfig

Configure all child motion components:

<MotionConfig
  transition={{ duration: 0.3 }}
  reducedMotion="user" // Respect prefers-reduced-motion
>
  <App />
</​MotionConfig>

---

19. Performance Tips

Hardware Acceleration: Motion automatically uses transforms for layout animations (60fps).

Avoid animating: width, height, top, left directly. Use scale and x/y instead.

Good:

<motion.div animate={{ x: 100, scale: 1.2 }} />

Bad:

<motion.div animate={{ left: 100, width: 200 }} /> // Forces layout recalc

Will-change: Motion automatically applies will-change when needed.

Reduce render triggers: Use MotionValues to update without re-renders.

---

Accessibility

20. Reduced Motion

Respect user preferences:

const shouldReduceMotion = useReducedMotion();

<motion.div
  animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
/>;

Or globally:

<MotionConfig reducedMotion="user">
  <App />
</​MotionConfig>

---

Best Practices

21. Premium Animation Guidelines

1. Natural Motion: Use spring animations for interactive elements

   transition={{ type: "spring", bounce: 0.25 }}
   

2. Micro-interactions: Add subtle hover/​tap feedback

   whileHover={{ scale: 1.05 }}
   whileTap={{ scale: 0.98 }}
   

3. Stagger Children: Create elegant cascading effects

   variants={{
     visible: {
       transition: { staggerChildren: 0.1 }
     }
   }}
   

4. Smooth Scroll Links: Use scroll-linked animations for parallax and progress

   const { scrollYProgress } = useScroll();
   

5. Exit Animations: Always animate elements out, don't just remove them

   <AnimatePresence mode="wait">{/​* content */​}</​AnimatePresence>
   

6. Layout Animations: Use layout prop for seamless size/​position transitions

   <motion.div layout />
   

7. Performant Transforms: Use scale/​translate over width/​height

   // Good
   animate={{ scale: 1.2, x: 100 }}
   
   // Bad
   animate={{ width: 200, left: 100 }}
   

---

Common Patterns

22. Page Transitions

<AnimatePresence mode="wait">
  <motion.div
    key={router.pathname}
    initial={{ opacity: 0, x: -20 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: 20 }}
    transition={{ duration: 0.3 }}
  >
    {children}
  </​motion.div>
</​AnimatePresence>

23. Modal/​Dialog

<AnimatePresence>
  {isOpen && (
    <>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onClose}
        className="backdrop"
      />
      <motion.div
        initial={{ opacity: 0, scale: 0.9, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.9, y: 20 }}
        className="modal"
      >
        {content}
      </​motion.div>
    </>
  )}
</​AnimatePresence>

24. Accordion

<motion.div layout>
  <motion.button onClick={toggle} layout>
    {title}
  </​motion.button>
  <AnimatePresence initial={false}>
    {isOpen && (
      <motion.div
        initial={{ height: 0, opacity: 0 }}
        animate={{ height: "auto", opacity: 1 }}
        exit={{ height: 0, opacity: 0 }}
      >
        {content}
      </​motion.div>
    )}
  </​AnimatePresence>
</​motion.div>

25. Parallax Scroll

const { scrollYProgress } = useScroll();
const y = useTransform(scrollYProgress, [0, 1], [0, -500]);

return <motion.div style={{ y }}>{content}</​motion.div>;

26. Hover Cards

<motion.div
  whileHover={{
    scale: 1.05,
    boxShadow: "0px 10px 30px rgba(0,0,0,0.2)",
  }}
  transition={{ type: "spring", stiffness: 300 }}
>
  {content}
</​motion.div>

---

Troubleshooting

Common Issues

Layout animations not working:

• Ensure element has defined dimensions
• Check parent isn't display: inline
• Verify no transform in CSS (conflicts with Motion)

Exit animations not working:

• Must be direct child of <AnimatePresence>
• Ensure unique key prop
• Check component isn't conditional before <AnimatePresence>

Performance issues:

• Avoid animating layout properties directly
• Use will-change sparingly (Motion handles this)
• Consider LazyMotion for bundle optimization

SVG animations broken:

• Set layout="position" instead of layout={true}
• Use attrX/attrY for SVG positioning

---

Resources

• Documentation: https://motion.dev/docs/react
• Examples: https://motion.dev/examples
• GitHub: https://github.com/motiondivision/motion

---

Summary

Motion is the most powerful animation library for React, offering:

• ✅ Declarative API with <motion /> components
• ✅ Gesture support (hover, tap, drag, focus)
• ✅ Layout animations using FLIP
• ✅ Scroll-triggered and scroll-linked animations
• ✅ Exit animations with <AnimatePresence>
• ✅ SVG animation support
• ✅ Motion values for performance
• ✅ Accessibility with reduced motion support
• ✅ Premium components (Carousel, Ticker, Typewriter, etc.)
• ✅ Tree-shakeable and optimizable with LazyMotion

Remember: Always prioritize performance by using transforms, respect user preferences with reduced motion, and create premium experiences with natural spring animations and thoughtful micro-interactions.