Effortless Drag and Drop with Framer Motion in React
Written on
Chapter 1: Introduction to Framer Motion
Framer Motion is an intuitive library designed for creating animations within React applications. With its user-friendly approach, developers can effortlessly integrate dynamic animations into their projects.
In this article, we’ll explore how to effectively utilize the dragElastic property of Framer Motion.
Section 1.1: Understanding dragElastic
The dragElastic property allows us to control the extent of movement permitted beyond defined boundaries. Its values range from 0, indicating no movement, to 1, which allows for complete freedom of movement. By default, the value is set to 0.5. Here’s an example of its implementation:
import React from "react";
import { motion } from "framer-motion";
export default function App() {
return (
<motion.div drag dragElastic={0.2}>
Drag me!</motion.div>
);
}
In this case, setting dragElastic to 0.2 slows down the drag movement.
Section 1.2: Using dragMomentum
The dragMomentum property enables momentum to carry over from the drag gesture when the interaction finishes. To prevent momentum from affecting the component after the drag ends, you can set it to false:
import React from "react";
import { motion } from "framer-motion";
export default function App() {
return (
<motion.div drag dragMomentum={false}>
Drag me!</motion.div>
);
}
This configuration ensures that the component stops immediately upon release.
Chapter 2: Customizing Drag Behavior
The dragTransition property allows for adjustments in the inertia during dragging. For instance, you can modify the bounceStiffness and bounceDamping to control the behavior of the element when not being dragged.
import React from "react";
import { motion } from "framer-motion";
export default function App() {
return (
<motion.div
drag
dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
>
Drag me!</motion.div>
);
}
Here, bounceDamping slows the element down, while bounceStiffness reduces any bounciness.
Section 2.1: Enabling dragPropagation
You can also enable drag gesture propagation to child components. This allows child elements to inherit drag gestures from their parent.
import React from "react";
import { motion } from "framer-motion";
export default function App() {
return (
<motion.div drag>
<motion.div drag>
Child Drag Me!</motion.div>
</motion.div>
);
}
With this setup, dragging the child component will also drag the parent.
Subsection 2.1.1: Implementing whileHover
The whileHover property lets you define styles that apply when an element is hovered over. For example:
import React from "react";
import { motion } from "framer-motion";
export default function App() {
return (
<motion.div whileHover={{ scale: 1.1 }}>
Hover over me!</motion.div>
);
}
This example increases the size of the div upon hovering.
Subsection 2.1.2: Using whileTap
Similarly, the whileTap property allows you to apply styles when the component is pressed.
import React from "react";
import { motion } from "framer-motion";
export default function App() {
return (
<motion.div whileTap={{ scale: 0.9 }}>
Tap me!</motion.div>
);
}
In this case, the div shrinks when tapped.
Conclusion
With Framer Motion, adding drag-and-drop functionality and gesture handling to your React applications becomes a straightforward process.
This video demonstrates implementing drag gesture animations using Framer Motion.
Explore how to create animations with drag gestures in Framer Motion through this informative video.