React Animations (Framer Motion)

Framer Motion is a powerful library for creating animations and transitions in React applications. It provides a simple and intuitive API to handle complex animations, making it easy to add smooth and interactive animations to your app. Whether you’re building a landing page, a user interface, or interactive components, Framer Motion allows you to bring your React app to life with just a few lines of code.

1. Prerequisites

Before starting with Framer Motion, ensure that:

You have a React app set up (either using Create React App or another method).
You have Framer Motion installed.

To install Framer Motion in your React project, run the following command:

npm install framer-motion

Or with yarn:

yarn add framer-motion

2. Basic Usage of Framer Motion

Framer Motion works by providing components like <motion.div>, <motion.section>, etc., that allow you to animate HTML elements. These components are similar to regular HTML elements but come with built-in animation properties.

2.1 Animating a Component

Here’s a simple example of animating a <div> using Framer Motion:

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

function App() {
  return (
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 2 }}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'lightblue',
      }}
    />
  );
}

export default App;

animate: Defines the animation properties (e.g., rotate: 360 makes the element rotate 360 degrees).
transition: Controls the duration, ease, or delay of the animation.

In this example, the <motion.div> rotates 360 degrees over a duration of 2 seconds.

2.2 Initial, Animate, and Exit Props

You can control the animation for when an element is initially rendered, when it’s active, and when it’s removed from the DOM using initial, animate, and exit properties.

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

function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 1 }}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'orange',
      }}
    />
  );
}

export default App;

initial: Defines the initial state of the element when it’s rendered (in this case, opacity: 0).
animate: Defines the target state (in this case, opacity: 1).
exit: Defines the animation when the component exits the DOM (for example, on unmounting).

3. Advanced Animations with Variants

Variants are an excellent way to organize your animations. They allow you to define different states of the element and apply those states in a more structured way.

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

function App() {
  const boxVariants = {
    hidden: { opacity: 0, x: -100 },
    visible: { opacity: 1, x: 0 },
  };

  return (
    <motion.div
      variants={boxVariants}
      initial="hidden"
      animate="visible"
      transition={{ duration: 1 }}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'green',
      }}
    />
  );
}

export default App;

variants: Contains predefined animation states (hidden, visible).
initial: The initial variant state (hidden).
animate: The target variant state (visible).

In this example, the box animates from x: -100 and opacity: 0 to x: 0 and opacity: 1 over a duration of 1 second.

4. Animating on Scroll (Use of Scroll & Viewport API)

Framer Motion provides the whileInView property to animate elements when they come into view as the user scrolls.

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

function App() {
  return (
    <motion.div
      whileInView={{ opacity: 1 }}
      initial={{ opacity: 0 }}
      transition={{ duration: 1 }}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'purple',
      }}
    />
  );
}

export default App;

whileInView: This triggers an animation when the element comes into the viewport.
initial: Sets the element’s starting state before it enters the viewport.
animate: Defines the final state of the element once it’s in view.

5. Gestures and Interactivity

Framer Motion makes it easy to animate elements based on user interaction like clicks, hover, and drag. Here’s an example of animating an element on hover:

5.1 Hover Animations

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

function App() {
  return (
    <motion.div
      whileHover={{ scale: 1.2 }}
      transition={{ type: 'spring', stiffness: 300 }}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'red',
      }}
    />
  );
}

export default App;

whileHover: Animates the element when hovered (here, it scales the element).
transition: Adds a spring transition for a more natural effect.

5.2 Drag Animations

Framer Motion also allows you to animate elements by dragging.

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

function App() {
  return (
    <motion.div
      drag
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'blue',
      }}
    />
  );
}

export default App;

drag: Makes the element draggable. You can control the dragging behavior by adding properties like dragConstraints, dragDirectionLock, etc.

6. Complex Animations (Sequence of Animations)

Framer Motion supports complex animations using animation sequencing and staggered animations.

6.1 Staggered Animations

You can animate a list of elements in sequence by staggering their animations.

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

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={{
        visible: { transition: { staggerChildren: 0.5 } },
        hidden: { opacity: 0 },
      }}
    >
      {items.map((item, index) => (
        <motion.div
          key={index}
          variants={{
            visible: { opacity: 1 },
            hidden: { opacity: 0 },
          }}
          style={{ margin: '10px', padding: '10px', background: 'lightgray' }}
        >
          {item}
        </motion.div>
      ))}
    </motion.div>
  );
}

export default App;