Framer Motion Fade from left or right animation example in react

This example will show two components: one that fades in from the left and another from the right.

First, ensure you have Framer Motion installed in your project:

npm install framer-motion

Components Setup

Create two components, FadeInLeft and FadeInRight, which you will use to demonstrate the animations.

FadeInLeft.js

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

const FadeInLeft = () => {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }} // start off-screen to the left
      animate={{ opacity: 1, x: 0 }} // end at its natural position
      transition={{ duration: 0.5 }}
      style={{ margin: '10px', padding: '20px', background: 'lightcoral', borderRadius: '5px' }}
    >
      Fade In From Left
    </motion.div>
  );
};

export default FadeInLeft;

FadeInRight.js

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

const FadeInRight = () => {
  return (
    <motion.div
      initial={{ opacity: 0, x: 100 }} // start off-screen to the right
      animate={{ opacity: 1, x: 0 }} // end at its natural position
      transition={{ duration: 0.5 }}
      style={{ margin: '10px', padding: '20px', background: 'lightblue', borderRadius: '5px' }}
    >
      Fade In From Right
    </motion.div>
  );
};

export default FadeInRight;

Using the Components

Now, you can use these components in your app to display the fade-in animations from the left and right. For example, in your App.js:

import React from 'react';
import FadeInLeft from './FadeInLeft'; // adjust the path as necessary
import FadeInRight from './FadeInRight'; // adjust the path as necessary

function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '50px' }}>
      <FadeInLeft />
      <FadeInRight />
    </div>
  );
}

export default App;

When you run your app, you should see the two components animating into view from the left and right sides, respectively. This effect is achieved by initially setting the components off-screen with the x property (negative for left and positive for right) and then animating them to their natural position (x: 0) while also changing their opacity from 0 to 1. To create an animation where elements fade in from the left and the right using Framer Motion in React, you can modify the initial and animate properties to include x-axis transformations. This example will guide you through creating two components: one that fades in from the left and another from the right.

First, ensure you have Framer Motion installed in your project:

npm install framer-motion
# or
yarn add framer-motion

Components Setup

Create two components, FadeInLeft and FadeInRight, which you will use to demonstrate the animations.

FadeInLeft.js

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

const FadeInLeft = () => {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }} // start off-screen to the left
      animate={{ opacity: 1, x: 0 }} // end at its natural position
      transition={{ duration: 0.5 }}
      style={{ margin: '10px', padding: '20px', background: 'lightcoral', borderRadius: '5px' }}
    >
      Fade In From Left
    </motion.div>
  );
};

export default FadeInLeft;

FadeInRight.js

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

const FadeInRight = () => {
  return (
    <motion.div
      initial={{ opacity: 0, x: 100 }} // start off-screen to the right
      animate={{ opacity: 1, x: 0 }} // end at its natural position
      transition={{ duration: 0.5 }}
      style={{ margin: '10px', padding: '20px', background: 'lightblue', borderRadius: '5px' }}
    >
      Fade In From Right
    </motion.div>
  );
};

export default FadeInRight;

Using the Components

Now, you can use these components in your app to display the fade-in animations from the left and right. For example, in your App.js:

import React from 'react';
import FadeInLeft from './FadeInLeft'; // adjust the path as necessary
import FadeInRight from './FadeInRight'; // adjust the path as necessary

function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '50px' }}>
      <FadeInLeft />
      <FadeInRight />
    </div>
  );
}

export default App;

When you run your app, you should see the two components animating into view from the left and right sides, respectively. This effect is achieved by initially setting the components off-screen with the x property (negative for left and positive for right) and then animating them to their natural position (x: 0) while also changing their opacity from 0 to 1.

Framer Motion makes it straightforward to create complex animations with simple declarative syntax. By adjusting the initial and animate props, you can create a wide variety of animations beyond just fading in from different directions.