Animating With Framer-motion

Framer Motion is a modern animation library for React that allows developers to create smooth, natural, and production-ready animations with minimal code. It provides an easy-to-use API, physics-based transitions, and powerful features like gesture support, layout animations, and exit animations, making it the go-to choice for animating React applications.

Features of react-motion

• Physics-based animations: Built-in spring animations for natural movements.
• Declarative API: Simple and intuitive syntax.
• Staggered Animations: Easily create coordinated animations.
• Exit/Enter Animations: Perfect for dynamic lists and page transitions.
• Actively Maintained: Works seamlessly with React 18 and Next.js.

Note: The react-motion library is old and may not install properly with the latest React versions (React 18+). Instead, you should use Framer Motion, a modern and powerful animation library for React that provides smooth, declarative, and production-ready animations.

Implementing Animation with framer-motion

Here are the steps to implement animations with framer-motion in React.

Step 1: Create a react project.

npx create-react-app react-app
cd react-app

Step 2: install framer-motion and update dependencies.

npm install framer-motion

Updated dependencies

"dependencies": {           
    "react": "^18.3.1",
    "react-dom": "^18.3.1", 
    "framer-motion": "^11.0.0",
    "react-scripts": "5.0.1", 
    "web-vitals": "^2.1.4"
 }

Folder Structure

To demonstrate creating a simple animation that moves a box from left to right using the framer -motion.

// src/Box.js
import React from "react";
import { motion } from "framer-motion";

const Box = () => {
  return (
    <motion.div
      initial={{ x: 0 }}        // starting position
      animate={{ x: 200 }}      // target position
      transition={{             // smooth spring animation
        type: "spring",
        stiffness: 60
      }}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "blue"
      }}
    />
  );
};

export default Box;

// src/App.js
import React from 'react';
import Box from './Box';

function App() {
    return (
        <div className="App">
            <h1>Framer-Motion Example</h1>
            <Box />
        </div>
    );
}

export default App;

Output

In this example

• The Box component uses Framer Motion to animate a div, moving it 200px along the X-axis smoothly using a spring transition.
• The motion.div element from Framer Motion takes initial (starting position: x: 0) and animate (target position: x: 200).
• The transition={{ type: "spring" }} property ensures the movement happens with a natural spring-like effect.
• The App component renders a heading "Framer Motion Example" and includes the Box component, which triggers the animation on render.

Advanced Usage

For complex animations, Framer Motion provides features like:

• Staggered Animations: Animate a sequence of components with delayed start times using staggerChildren.
• Enter & Exit Animations: Easily handle mounting and unmounting animations using AnimatePresence

To demonstrate creating a staggeredBoxes component using the framer motion

// src/StaggeredBoxes.js
import React from "react";
import { motion } from "framer-motion";

const containerVariants = {
  hidden: { opacity: 1 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.3, // delay between each child animation
    },
  },
};

const boxVariants = {
  hidden: { x: 0 },
  show: { x: 200, transition: { type: "spring" } },
};

const StaggeredBoxes = () => {
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="show"
    >
      {[1, 2, 3].map((i) => (
        <motion.div
          key={i}
          variants={boxVariants}
          style={{
            width: "100px",
            height: "100px",
            backgroundColor: "blue",
            margin: "10px",
          }}
        />
      ))}
    </motion.div>
  );
};

export default StaggeredBoxes;

// src/App.js
import React from 'react';
import StaggeredBoxes from './StaggeredBoxes';

function App() {
    return (
        <div className="App">
            <h1>Framer-Motion Example</h1>
            <StaggeredBoxes />
        </div>
    );
}

export default App;

Output

In this example

• The StaggeredBoxes component uses Framer Motion to animate multiple <div> elements in sequence.
• containerVariants defines the staggered animation logic using staggerChildren: 0.3.
• Each box uses boxVariants to move 200px along the X-axis with a spring effect.
• When the component is rendered, boxes animate one after another, creating a staggered effect.
• This modular approach makes the animation reusable and cleaner compared to React-Motion’s StaggeredMotion.