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!
Top comments (0)