3

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?

Jesse Sliter
  • 201
  • 1
  • 3
  • 12

1 Answers1

2

I didn't experiment with useSpring yet, but you can get it to work with useAnimation.

Here's a CodeSandbox with a similar situation: https://codesandbox.io/s/framer-motion-bottom-sheet-fixed-m2vls.

Hope this helps!

amann
  • 3,899
  • 2
  • 27
  • 40
  • This appears to be broken with v2 of Framer motion. Any idea on what need to change? – Josiah Nunemaker Aug 11 '20 at 16:36
  • I had a quick look but didn't get it to work yet. It seems to me like there's a bug when you use dragging and `useAnimation` on the same component. – amann Sep 21 '20 at 14:32