Creating a draggable element with limits and smooth animations using Framer-Motion

Drag functionality can add a lot of interactivity and usability to your website or application. It allows users to move and rearrange elements on the screen, making it easier for them to customize their experience.

In this tutorial, we will be using the popular animation library Framer-Motion to create a drag functionality with limits and smooth animations.

Setting up

First, make sure you have Framer-Motion installed in your project. You can do this by running the following command in your terminal:

npm install framer-motion

or

yarn add framer-motion

Next, import the motion component from Framer-Motion in your code:

import { motion } from "framer-motion";

Creating the draggable element

We will start by wrapping our draggable element in a motion.div component. This will allow us to apply animations and gestures to the element.

<motion.div drag>
  {/* draggable element */}
</motion.div>

The drag prop enables drag gestures on the element.

Setting limits for the drag

By default, the draggable element can be dragged anywhere on the screen. However, we can set limits for the drag using the dragConstraints prop.

For example, to limit the drag to the top half of the screen, we can use the following code:

  <motion.div
   drag
   dragConstraints={{ top: 0, bottom: 200 }}
  >
    {/* draggable element */}
  </motion.div>

You can also use pixel values to set the limits. For example, to limit the drag to a 300x300px box centered on the element's initial position, you can use the following code:

 <motion.div
   drag
   dragConstraints={{
    top: -150,
    left: -150,
    right: 150,
    bottom: 150,
  }}
 >
   {/* draggable element */}
 </motion.div>

you can also wrap the draggable component inside a container and use the container width and height as the dragConstraints by passing the container ref to the dragConstraints porp:

const MyComponent = () => {
  const constraintsRef = useRef(null)

  return (
     <motion.div ref={constraintsRef}>
         <motion.div
            drag
            dragConstraints={constraintsRef} 
         >
             {/* draggable element */}
         </motion.div>

     </motion.div>
  )
}

Adding animations

Now that we have our draggable element set up, let's add some animations to make the dragging experience more visually appealing.

We can use the whileHover prop to add a scale animation to the element when the user hovers over it.

 <motion.div
   drag
   whileHover={{ scale: 1.1 }}
   dragConstraints={{
    top: -150,
    left: -150,
    right: 150,
    bottom: 150,
  }}
 >
   {/* draggable element */}
 </motion.div>

We can also use the whileTap prop to add a shadow to the element when the user is dragging it.

<motion.div
  drag
  whileHover={{ scale: 1.1 }}
  whileTap={{ boxShadow: "0px 0px 15px rgba(0,0,0,0.2)" }}
  dragConstraints={{
    top: -150,
    left: -150,
    right: 150,
    bottom: 150,
  }}
>
  {/* draggable element */}
</motion.div>

Adding smooth transitions

To make the dragging experience feel more natural and smooth, we can use the dragTransition prop to add a transition to the element as it is dragged.

<motion.div
  drag
  dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
  whileHover={{ scale: 1.1 }}
  whileTap={{ boxShadow: "0px 0px 15px rgba(0,0,0,0.2)" }}
  dragConstraints={{
    top: -150,
    left: -150,
    right: 150,
    bottom: 150,
  }}
>
  {/* draggable element  */}
</motion.div>

The bounceStiffness and bounceDamping props control the bounciness of the transition. You can adjust these values to get the desired effect.

Wrapping up

That's it! You now have a fully functional draggable element with limits and smooth animations using Framer-Motion.

You can customize the drag functionality and animations even further by exploring the other props and options available in Framer-Motion.

I hope this tutorial was helpful in getting you started with drag functionality using Framer-Motion. Happy coding!