Framer Motion —Motion Components

Photo by Jonny Caspari on Unsplash

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

Motion Components

Motion components are DOM elements optimized for 60fps animations and gestures.

For example, to create an animated div, we can use the motion.div component.

To do this, we write:

import { motion } from "framer-motion";
import React from "react";
export default function App() {
  return (
    <>
      <motion.div
        animate={{ rotate: 360 }}
        transition={{ duration: 2 }}
        style={{ backgroundColor: "red", width: 100, height: 100 }}
      />
    </>
  );
}

to add a div that animates by rotating 360 degrees.

And we set the transition prop to set the duration of the animation to 2 seconds.

Supported Values

We can add various types of values for our animation.

We can add:

• numbers
• strings
• colors in hex, RGB, or HSL format
• complex strings with multiple numbers or colors