buttons.diff

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

 // Override Docs: https://framer.com/docs/overrides
 window.log = console.log
@@ -20,10 +20,27 @@ export function Card(): Override {
     x: dragX,
     y: dragY,
     animate: anim,
-    onDragEnd(event, info) {
+    onDrag(event, info) {
       var dragAmount = info.point.x
       log('dragAmount', dragAmount)

+      // Buttons Animation
+      likeButtonAnim.start({
+        opacity: transform(dragAmount, [30, 150], [0, 1]),
+        transition: {
+          duration: 0,
+        },
+      })
+      nopeButtonAnim.start({
+        opacity: transform(dragAmount, [-30, -150], [0, 1]),
+        transition: {
+          duration: 0,
+        },
+      })
+    },
+    onDragEnd(event, info) {
+      var dragAmount = info.point.x
+
       if (dragAmount > 150) {
         // swipe card right side
         dragX.stop()
@@ -45,6 +62,36 @@ export function Card(): Override {
           },
         })
       }
+
+      // Buttons Animation
+      likeButtonAnim.start({
+        opacity: 0,
+      })
+      nopeButtonAnim.start({
+        opacity: 0,
+      })
+    },
+  }
+}
+
+var likeButtonAnim
+export function LikeButton(): Override {
+  likeButtonAnim = useAnimation()
+  return {
+    initial: {
+      opacity: 0,
+    },
+    animate: likeButtonAnim,
+  }
+}
+
+var nopeButtonAnim
+export function NopeButton(): Override {
+  nopeButtonAnim = useAnimation()
+  return {
+    initial: {
+      opacity: 0,
     },
+    animate: nopeButtonAnim,
   }
 }