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.

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

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.