Framer Motion: Animate Your React Applications

Framer Motion is a powerful and easy-to-use animation library for React. With its simple API and expressive animations, you can create engaging interactions and delightful animations in your React applications.

In this tutorial, we will cover:

1. Installing Framer Motion
2. Basic animations
3. AnimatePresence
4. Variants and transitions

Installing Framer Motion

First, install Framer Motion in your React project:

npm install framer-motion

Basic animations

To get started with Framer Motion, import the motion object and use it to create an animated component. Here's an example of a simple animation:

JavaScript

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

const Example = () => {
  return (
    <motion.div
      animate={{ x: 100, opacity: 0.5 }}
      transition={{ duration: 1 }}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'blue',
      }}
    />
  );
};

export default Example;

In this example, we create a motion.div component and apply the animate prop to specify the final state of the animation. The transition prop controls the animation duration.

AnimatePresence

AnimatePresence is a component that allows you to animate components when they are added or removed from the DOM. Here's an example:

JavaScript

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

const Example = () => {
  const [visible, setVisible] = useState(true);

  return (
    <>
      <button onClick={() => setVisible(!visible)}>Toggle</button>
      <AnimatePresence>
        {visible && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 1 }}
            style={{
              width: '100px',
              height: '100px',
              backgroundColor: 'red',
            }}
          />
        )}
      </AnimatePresence>
    </>
  );
};

export default Example;

In this example, we use the AnimatePresence component to wrap our motion.div. The initial, animate, and exit props control the animation states for entering, active, and exiting components.

Variants and transitions

Variants allow you to define animation states in a more organized way. Here's an example using variants:

JavaScript

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

const variants = {
  hidden: { opacity: 0, y: -100 },
  visible: { opacity: 1, y: 0 },
};

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

export default Example;

In this example, we define a variants object and use the initial, animate, and variants props to control the animation states. The transition prop still controls the animation duration.

With these techniques, you can create complex animations and interactions in your React applications using Framer Motion.

Conclusion

Framer Motion is a powerful and easy-to-use animation library for React. In this tutorial, we covered:

• Installing Framer Motion
• Basic animations
• AnimatePresence for enter and exit animations
• Variants and transitions for organized animations

By applying these concepts, you can create engaging interactions and animations in your React applications. Happy animating!