Framer Motion — Drag and Drop and Gesture Handling

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.

dragElastic

We can set the dragElastic prop to set the degree of movement allowed outside constraints.

Possible values range from 0, which means no movement, to 1, which means full movement.

The default value is 0.5.

For example, we can write:

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

export default function App() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 300 }}
      dragElastic={0.2}
      style={{ background: "red", width: 100, height: 100 }}
    />
  );
}

We set the dragElastic prop to 0.2 to slow down movement.

dragMomentum

The dragMomentum prop lets us apply momentum from the pan gesture to the component while dragging finishes.

For example, we can write:

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

export default function App() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 300 }}
      dragMomentum={false}
      style={{ background: "red", width: 100, height: 100 }}
    />
  );
}

We set dragMomentum to false so that we remove momentum from the pan gesture to the component after dragging ends.

dragTransition

The dragTransition prop lets us change dragging inertia.

For example, we can write:

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

export default function App() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 300 }}
      dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
      style={{ background: "red", width: 100, height: 100 }}
    />
  );
}

We set the bounceStiffnes and bounceDamping to set how the div acts without dragging.

Damping slows the div down. And stiffness removes the bounciness of the div.

dragPropagation

We can allow drag gesture propagation to child components.

For instance, we can write:

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

export default function App() {
  return (
    <motion.div
      drag="x"
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    >
      <motion.div
        drag="x"
        dragConstraints={{ left: 0, right: 300 }}
        dragPropagation
        style={{
          backgroundColor: "green",
          width: 50,
          height: 50
        }}
      ></motion.div>
    </motion.div>
  );
}

Then the drag gestures propagate from the child div to the parent.

whileHover

The whileHover prop lets us apply styles when we hover over an element.

For example, we can write:

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

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

to set the div to increase in size when we hover over it.

whileTap

The whileTap prop lets us apply styles to an element when the component is pressed.

For instance, we can write:

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

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

We set the whileTap prop so that the div shrinks when we tap on it.

Conclusion

We can add drag and drop and gesture handling with Framer Motion.