DEV Community

Cover image for How to build 3 simple animation with framer motion
rardooba
rardooba

Posted on

5

How to build 3 simple animation with framer motion

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 !

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
z_bj profile image
Zakaria Beji

Cool copy !

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more