Framer Motion —Motion Components

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

Non-animatable values will be set instantly.

If we set these values within transitionEnd , then this value will be set at the end of the animation.

For instance, we can use it by writing;

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return (
    <>
      <motion.div
        animate={{
          x: 0,
          backgroundColor: "#000",
          boxShadow: "10px 10px 0 rgba(0, 0, 0, 0.2)",
          position: "fixed",
          transitionEnd: {
            display: "none"
          }
        }}
        style={{ backgroundColor: "red", width: 100, height: 100 }}
      />
    </>
  );
}

We set the animate prop to an object with various values.

x is the x coordinate of the element’s position.

backgroundColor has a background color.

boxShadow has the box shadow.

position is set to 'fixed' .

transitionEnd has the value display set to 'none' .

We have all these values applied duration animation.

Value Type Conversion

Values can only be animated between 2 of the same type.

However, x , y , width , height , top , left , right , and bottom values can be animated between 2 different value types.

For instance, we can write:

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return (
    <>
      <motion.div
        initial={{ x: "100%" }}
        animate={{ x: "calc(100vw - 50%)" }}
        style={{ backgroundColor: "red", width: 100, height: 100 }}
      />
    </>
  );
}

We have the initial prop set to an object with x set to '100%' .

And in the animare prop, we set x to 'calc(100vw — 50%) .

They’re different types of values, but Framer Motion can convert between them.

Transform

Transform properties are accelerated by the GPU so they can animate smoothly.

Transform properties include:

• Translate shortcuts: x, y, z
• Translate: translateX, translateY, translateZ
• Scale: scale, scaleX, scaleY
• Rotate: rotate, rotateX, rotateY, rotateZ
• Skew: skew, skewX, skewY
• Perspective: transformPerspective

For example, we can write:

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return (
    <>
      <motion.div
        whileHover={{ scale: 1.2 }}
        whileTap={{ scale: 0.8 }}
        style={{ backgroundColor: "red", width: 100, height: 100 }}
      />
    </>
  );
}

Then when we tap or hover on the div, we’ll see smooth size changes.

Conclusion

Motion components are elements that we can animate with Framer Motion.