Animations are an essential part of any user interface, and Framer Motion is a powerful library for creating animations in React. It provides a simple and performant way to add animations to your components. In this article, we will show you how to build three simple animations using Framer Motion for React.
1. Fading in and out
The first animation we will create is a simple fade in and out animation. We will use the animate property and the opacity property to create this animation. First, we need to import the motion.div component from Framer Motion. We will use this component to wrap our div that we want to animate. Then, we can use the animate property to define the animation and the opacity property to define the initial and final states of the animation.
import { motion } from 'framer-motion';
function FadeInOut() {
return (
<motion.div
animate={{ opacity: [0, 1, 0] }}
transition={{ duration: 2, loop: Infinity }}
>
<p>Fading in and out</p>
</motion.div>
);
}
In the example above, we are telling Framer Motion to animate the opacity of the wrapped div from 0 to 1 and back to 0. We also define a transition with a duration of 2 seconds and a loop that repeats infinitely.
2. Move along a path
The second animation we will create is a simple animation that moves an element along a path. We will use the motion.path component to define the path, and the animate property to move the element along the path.
import { motion } from 'framer-motion';
function MoveAlongPath() {
return (
<motion.path
d="M10,10 L90,90"
animate={{ pathLength: [0, 1] }}
transition={{ duration: 2 }}
>
{(path) => (
<motion.div
animate={{ pathLength: [0, 1] }}
style={{ path, position: 'absolute' }}
>
<p>Moving along a path</p>
</motion.div>
)}
</motion.path>
);
}
In this example, we defined a path using the d attribute and set the pathLength property to [0,1], which makes the element move along the path from start to end. We also defined a transition with a duration of 2 seconds. The component wrapped inside the path component uses the path prop and position absolute to move along the path
3. Rotating
The third animation we will create is a simple rotation animation. We will use the animate property and the rotate property to create this animation.
import { motion } from 'framer-motion';
function Rotating() {
return (
<motion.div
animate={{ rotate: [0, 360] }}
transition={{ duration: 2, loop: Infinity }}
>
<p>Rotating</p>
</motion.div>
);
}
In this example, we are telling Framer Motion to animate the rotation of the div from 0 to 360 degrees, and we also defined a transition with a duration of 2 seconds and a loop that repeats.
That's it ! See U next level !
Top comments (1)
Cool copy !