How to Use Framer Motion in React for Smooth Animations

To use framer-motion in React, first install it with npm install framer-motion. Then import components like motion from the library and wrap your elements with <motion.div> or other motion tags, adding animation props such as initial, animate, and transition to control the animation behavior.

Syntax

Framer Motion uses special components like motion.div to animate elements. You define the starting state with initial, the ending state with animate, and control timing with transition.

Example props:

• initial: The starting style or position.
• animate: The style or position to animate to.
• transition: Controls duration, easing, and delay.

jsx

import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5 }}
    >
      Hello Animation
    </motion.div>
  );
}

Output

A box with text 'Hello Animation' that fades in and slides from left to right over 0.5 seconds.

Example

This example shows a button that scales up when hovered and scales back down when not hovered, demonstrating simple interactive animation with Framer Motion.

jsx

import React from 'react';
import { motion } from 'framer-motion';

export default function HoverButton() {
  return (
    <motion.button
      style={{ padding: '1rem 2rem', fontSize: '1.2rem', cursor: 'pointer' }}
      whileHover={{ scale: 1.2 }}
      whileTap={{ scale: 0.9 }}
      transition={{ type: 'spring', stiffness: 300 }}
    >
      Hover me
    </motion.button>
  );
}

Output

A button labeled 'Hover me' that grows bigger when hovered and shrinks slightly when clicked.

Common Pitfalls

Common mistakes when using Framer Motion include:

• Not wrapping elements with motion.* components, so animations won't work.
• Forgetting to import motion from framer-motion.
• Using invalid animation values or missing required props like animate.
• Trying to animate non-style properties without using the correct syntax.

Always check the console for errors and ensure your props are valid objects.

jsx

/* Wrong way: Missing motion wrapper */
function Wrong() {
  return <div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>No animation</div>;
}

/* Right way: Use motion.div */
import { motion } from 'framer-motion';
function Right() {
  return <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Animated</motion.div>;
}

Output

The first example does not animate; the second example fades in the text 'Animated'.

Quick Reference

Prop	Description	Example Value
initial	Starting animation state	{ opacity: 0, x: -100 }
animate	Ending animation state	{ opacity: 1, x: 0 }
transition	Animation timing and easing	{ duration: 0.5, type: 'spring' }
whileHover	Animation on hover	{ scale: 1.2 }
whileTap	Animation on tap/click	{ scale: 0.9 }

Key Takeaways

Install framer-motion and import motion components to animate React elements.

Use initial, animate, and transition props to define animation states and timing.

Wrap elements with motion.* components to enable animations.

Use whileHover and whileTap for interactive animations like button effects.

Check for common mistakes like missing imports or invalid props to avoid animation failures.