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 theanimate property and theopacity property to create this animation. First, we need to import themotion.div component from Framer Motion. We will use this component to wrap our div that we want to animate. Then, we can use theanimate property to define the animation and theopacity property to define the initial and final states of the animation.

import{motion}from'framer-motion';functionFadeInOut(){return(<motion.divanimate={{opacity:[0,1,0]}}transition={{duration:2,loop:Infinity}}><p>Fadinginandout</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 themotion.path component to define the path, and theanimate property to move the element along the path.

import{motion}from'framer-motion';functionMoveAlongPath(){return(<motion.pathd="M10,10 L90,90"animate={{pathLength:[0,1]}}transition={{duration:2}}>{(path)=>(<motion.divanimate={{pathLength:[0,1]}}style={{path,position:'absolute'}}><p>Movingalongapath</p></motion.div>)}</motion.path>);}

In this example, we defined a path using thed attribute and set thepathLength 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 theanimate property and therotate property to create this animation.

import{motion}from'framer-motion';functionRotating(){return(<motion.divanimate={{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 !