Framer Motion — Variants and Drag and Drop

Photo by Ethan Sexton 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.

variants

We can organize styles with variants.

They let us control animations throughout a component tree by switching to a single animate prop.

For example, we can write:

import React from "react";
import { motion } from "framer-motion";
const variants = {
  active: {
    backgroundColor: "#f00"
  },
  inactive: {
    backgroundColor: "#fff",
    transition: { duration: 2 }
  }
};
export default function App() {
  return (
    <>
      <motion.div
        style={{ width: 100, height: 100 }}
        variants={variants}
        animate="active"
      />
    </>
  );
}

We create the variants object with some styles we want to apply at various stages of animation.

Then we apply them by passing the variants object as the value of the variants prop.

Then we set animate to 'active' to set the styles when the animation ends to the ones in the active property.

style