Motion (Framer Motion) — Modern Animation Library for React & JS

What it is

Motion (formerly Framer Motion) is a modern animation library for React and vanilla JavaScript. It provides a simple declarative API for hardware-accelerated transforms, gesture recognition, layout animations, scroll-triggered animations, and SVG path morphing. The library handles the complexity of performant animations while keeping the developer API minimal.

This tool is for frontend developers who need smooth, production-quality animations without writing raw CSS keyframes or JavaScript requestAnimationFrame loops.

How it saves time or tokens

Motion abstracts animation complexity into a few props. What would require dozens of lines of CSS and JavaScript becomes a single <motion.div> component with animate, whileHover, and layout props. Gesture detection, spring physics, and layout change animations work out of the box. For AI-assisted frontend development, generating Motion animations requires minimal code.

How to use

1. Install Motion via npm.
2. Import the motion component.
3. Add animation props to your JSX elements.
4. Motion handles the rest: physics, performance, and cleanup.

# Install Motion
npm install motion

# For React
npm install framer-motion

Example

import { motion } from 'framer-motion'

function AnimatedCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: 'spring', stiffness: 300 }}
      className='card'
    >
      <h2>Animated Card</h2>
      <p>This card animates in, responds to hover and tap.</p>
    </motion.div>
  )
}

// Layout animation: smooth transitions when list items reorder
function AnimatedList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <motion.li
          key={item.id}
          layout
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          {item.name}
        </motion.li>
      ))}
    </ul>
  )
}

Related on TokRepo

• AI coding tools — Frontend development tools
• Design tools — UI and animation design

Common pitfalls

• Animating layout properties (width, height) can cause layout thrashing. Use transform properties (x, y, scale, rotate) whenever possible for GPU-accelerated performance.
• The layout prop triggers re-renders. In lists with many items, this can cause performance issues. Use layoutId selectively.
• Motion adds bundle size. If you only need simple CSS transitions, consider native CSS instead of importing the full library.
• Exit animations require AnimatePresence wrapper. Forgetting it means components disappear without animation.
• Spring animations look natural but can overshoot. Tune stiffness and damping values for your use case.
• Review the official documentation before deploying to production to ensure compatibility with your specific environment and requirements.