DEV Community

Cover image for Varaiants for Drag and Drop in Framer Motion
Satel Dev
Satel Dev

Posted on

Varaiants for Drag and Drop in Framer Motion

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.

Sample:

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

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

The style prop is like the style prop in React, but it’s enhanced to support motion values and transform values.

Sample:

import React from "react";
import { motion, useMotionValue } from "framer-motion";
export default function App() {
  const x = useMotionValue(0);
  return (
    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: "red",
        x,
        opacity: 1,
        scale: 0.5
      }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

We pass the x motion value into the style prop so we can set the horizontal position of the div.

Layout Animation

We can create layout animations with Framer Motion.

The layout prop lets us animate an element to its new position when its layout changes.

Sample:

import React from "react";
import { AnimateSharedLayout, motion } from "framer-motion";
const items = [
  { name: "foo", isSelected: true, id: 1 },
  { name: "bar", isSelected: false, id: 2 },
  { name: "baz", isSelected: true, id: 3 }
];
export default function App() {
  return (
    <AnimateSharedLayout>
      {items.map((item) => (
        <motion.li layout key={item.id}>
          {item.name}
          {item.isSelected && <motion.hr layoutId="underline" />}
        </motion.li>
      ))}
    </AnimateSharedLayout>
  );
}
Enter fullscreen mode Exit fullscreen mode

to let us animate the changes in the layout with the AnimateSharedLayout component.

We have the motion.li to animate the li elements when the li layout change.

Drag

We can add drag and drop capabilities to our elements with Framer Motion.

Sample:

import React, { useRef } from "react";
import { motion } from "framer-motion";
export default function App() {
  const constraintsRef = useRef(null);
  return (
    <motion.div
      ref={constraintsRef}
      style={{ background: "green", width: 200, height: 200 }}
    >
      <motion.div
        drag
        dragConstraints={constraintsRef}
        style={{ background: "red", width: 100, height: 100 }}
      />
    </motion.div>
  );
}
Enter fullscreen mode Exit fullscreen mode

We allow the red div to be dragged around within the green div. We do this by assigning a ref to the green div. Then we pass the ref as the value of the dragConstraints prop. The drag prop lets us enable dragging on the red div.

Discussion (0)