I'm using framer motion to create a swipe interaction in my project. I'm trying to make it so that when the user is done dragging the child, it will 'snap' back into a set position.
I've seen from the docs that you can use a spring to animate a motion value: const y = useSpring(x, { damping: 10 })
, but I guess I'm not doing it correctly? Heres my code:
export default function SwipeContainer(props) {
const x = useMotionValue(0);
const m = useSpring(x, { damping: 10 });
const handleDragEnd = (evt) => {
console.log(evt);
m.set(200);
}
return (
<div className={styles.swipeContainer}>
<motion.div
style= {{ x, m }}
className={styles.motionDiv}
drag="x"
onDragEnd={handleDragEnd}
>
{props.children}
</motion.div>
</div>
);
}
I'm expecting that when the dragEnd event happens, the child will animate to x:200, but thats not happening. Am I setting the value incorrectly, or perhaps its how I'm applying the motion values to the motion.div?