Using Framer Motion for Stunning Animations in React

Animations can make your React applications more interactive and engaging. Framer Motion is one of the easiest and most powerful libraries for adding animations to your projects. Its simple API, flexibility, and seamless integration with React make it a perfect choice for developers.

Let’s explore how you can quickly get started with Framer Motion.

Why Use Framer Motion?

• Simple to Use: Easy-to-understand syntax.
• Powerful Features: Includes gestures, drag-and-drop, and advanced animations.
• Optimized Performance: Smooth and fast animations.

Setting Up Framer Motion

To get started, you need to install the library:

npm install framer-motion

Basic Fade-In Animation

Let’s create a simple fade-in animation for a component.

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

const FadeInComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      <h1>Welcome to Framer Motion!</h1>
    </motion.div>
  );
};

export default FadeInComponent;

Here’s what’s happening:

• initial: Defines the starting state of the animation (opacity set to 0).
• animate: Defines the end state of the animation (opacity set to 1).
• transition: Controls the timing and behavior of the animation (1-second duration).

Adding Motion with Gestures

Framer Motion supports user interactions like hover and tap effects. Let’s add a hover effect to a button.

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

const HoverButton = () => {
  return (
    <motion.button
      whileHover={{ scale: 1.2 }}
      whileTap={{ scale: 0.9 }}
      style={{
        padding: "10px 20px",
        fontSize: "16px",
        backgroundColor: "#6200ea",
        color: "#fff",
        border: "none",
        borderRadius: "8px",
        cursor: "pointer",
      }}
    >
      Hover Me
    </motion.button>
  );
};

export default HoverButton;

• whileHover: Scales the button up to 1.2 times its size on hover.
• whileTap: Scales the button down slightly when clicked.

Animating a List

Framer Motion also simplifies animating dynamic lists with the AnimatePresence component. Let’s animate items being added or removed from a list.

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const AnimatedList = () => {
  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {
    setItems([...items, items.length + 1]);
  };

  const removeItem = () => {
    setItems(items.slice(0, -1));
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <button onClick={removeItem}>Remove Item</button>
      <AnimatePresence>
        {items.map((item) => (
          <motion.div
            key={item}
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }}
            transition={{ duration: 0.5 }}
            style={{
              margin: "10px 0",
              padding: "10px",
              backgroundColor: "#f0f0f0",
              borderRadius: "5px",
            }}
          >
            Item {item}
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
};

export default AnimatedList;

• AnimatePresence: Enables animations when elements enter or leave the DOM.
• exit: Defines the animation for elements leaving the DOM.

Drag-and-Drop Animation

Framer Motion supports drag-and-drop out of the box. Here’s how to make a draggable box.

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

const DraggableBox = () => {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 300, top: 0, bottom: 300 }}
      style={{
        width: 100,
        height: 100,
        backgroundColor: "#ff4081",
        borderRadius: "10px",
        cursor: "grab",
      }}
    />
  );
};

export default DraggableBox;

• drag: Enables drag functionality.
• dragConstraints: Limits the draggable area.

Wrapping Up

Framer Motion makes adding animations easy and fun. With just a few lines of code, you can enhance the user experience in your React apps. Explore more features in the Framer Motion documentation and start animating today!

Visit https://codeymaze.com/ for more articles