Framer Motion animation example in react

Framer Motion is a popular and powerful library for React that makes creating animations easy and intuitive. Here's a basic example to get you started with Framer Motion, showcasing how to animate a simple box component when it mounts.

First, ensure you have Framer Motion installed in your project. If you haven't installed it yet, you can do so by running:

npm install framer-motion

Next, let's create a simple component that uses Framer Motion to animate. We'll make a Box component that fades and scales up when it first appears.

Box Component with Framer Motion

Create a new file named Box.js (or any name you prefer) and add the following code:

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

const Box = () => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }} // Initial state of the component
      animate={{ opacity: 1, scale: 1 }} // Final state of the component (visible and scaled up)
      transition={{ duration: 0.5 }} // Animation duration
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'salmon',
        margin: '0 auto',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 20,
      }}
    >
      Animate Me
    </motion.div>
  );
};

export default Box;

In this example, the motion.div component is used in place of the standard div. It accepts initial, animate, and transition props that define the animation's starting state, ending state, and how it transitions between the two, respectively.

• initial: The initial appearance of the component before the animation starts. In this case, it's semi-transparent (opacity: 0) and scaled down to half its size (scale: 0.5).
• animate: The state the component animates to. Here, it transitions to full opacity and its original size.
• transition: Defines the timing and type of the transition. We're using a simple duration of 0.5 seconds.

Using the Box Component

To see the animation in action, import and use the Box component in your application's component, like so:

import React from 'react';
import Box from './Box'; // Adjust the import path according to your file structure

const App = () => {
  return (
    <div>
      <h1>Framer Motion Example</h1>
      <Box />
    </div>
  );
};

export default App;

Now, when you run your React application, you should see the Box component fade in and scale up when it first mounts, showcasing a simple but effective animation using Framer Motion. This example barely scratches the surface of what's possible with Framer Motion, which supports a wide range of animations, gestures, and more advanced effects for creating dynamic and interactive user experiences.