Framer Motion — Drag and Scroll Progress

Photo by Erol Ahmed 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.

Drag

We can add drag and drop into our React app with Framer Motion.

For example, we can write:

import React from "react";
import { motion } from "framer-motion";
export default function App() {
  return (
    <>
      <motion.div
        drag
        dragConstraints={{
          top: -50,
          left: -50,
          right: 50,
          bottom: 50
        }}
        style={{ backgroundColor: "red", width: 100, height: 100 }}
      />
    </>
  );
}

to make a draggable div.

We add the drag prop to make the div draggable in all directions.

And we add the dragConstraints prop to constrain the positions that the div can be dragged to.

MotionValues

We can use MotionValues to track the state and velocity of all animation values.

For example, we can write:

import React from "react";
import { motion, useMotionValue, useTransform } from "framer-motion";
export default function App() {…