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.