10. Drag: Inertia
Set up dragConstraints
, and you get the jump-back animation for free.
Code component
export function CC10DragInertia() {
return (
<Frame
// Visual & layout
size={150}
radius={30}
backgroundColor="#fff"
center
// Dragging
drag
dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
dragElastic={0.5}
/>
)
}
Framer Motion
export function FM10DragInertia() {
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
cursor: "grab",
}}
drag
dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
dragElastic={0.5}
whileTap={{ cursor: "grabbing" }}
/>
</Center>
)
}
Override
export function Drag_Inertia(): Override {
return {
drag: true,
dragConstraints: { top: 0, right: 0, bottom: 0, left: 0 },
dragTransition: { bounceStiffness: 600, bounceDamping: 20 },
dragElastic: 0.5,
}
}