useMotionValue.diff

--- a/tinder-swipe.framerfx/code/App.tsx
+++ b/tinder-swipe.framerfx/code/App.tsx
@@ -1,10 +1,13 @@
-import { Override, useAnimation } from 'framer'
+import { Override, useAnimation, useMotionValue } from 'framer'

 // Override Docs: https://framer.com/docs/overrides
 window.log = console.log

 export function Card(): Override {
   const anim = useAnimation()
+  const dragX = useMotionValue(0)
+  const dragY = useMotionValue(0)
+
   return {
     drag: true,
     dragConstraints: {
@@ -14,6 +17,8 @@ export function Card(): Override {
       right: 0,
     },
     dragElastic: 1,
+    x: dragX,
+    y: dragY,
     animate: anim,
     onDragEnd(event, info) {
       var dragAmount = info.point.x
@@ -21,6 +26,8 @@ export function Card(): Override {

       if (dragAmount > 150) {
         // swipe card right side
+        dragX.stop()
+        dragY.stop()
         anim.start({
           left: 500,
           transition: {
@@ -29,6 +36,8 @@ export function Card(): Override {
         })
       } else if (dragAmount < -150) {
         // swipe card right side
+        dragX.stop()
+        dragY.stop()
         anim.start({
           right: 500,
           transition: {