How to build 3 simple animation with framer motion

#react #webdev #tutorial #framermotion

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 !