Creating a draggable element with limits and smooth animations using Framer-Motion
Tags: react, webdev, javascript, tutorial
Published: 2022-12-23 13:56:58

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:

```javascript
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.

```javascript
<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:

```javascript
  <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:

```javascript
 <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:

```javascript
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.

```javascript
 <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.

```javascript
<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.

```javascript
<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!