multiple.diff

--- a/tinder-swipe.framerfx/code/App.tsx
+++ b/tinder-swipe.framerfx/code/App.tsx
@@ -3,6 +3,7 @@ import { Override, useAnimation, useMotionValue, transform } from 'framer'
 // Override Docs: https://framer.com/docs/overrides
 window.log = console.log

+var cardCounts = 3 - 1
 export function Card(): Override {
   const anim = useAnimation()
   const dragX = useMotionValue(0)
@@ -25,13 +26,13 @@ export function Card(): Override {
       log('dragAmount', dragAmount)

       // Buttons Animation
-      likeButtonAnim.start({
+      likeButtonAnims[cardCounts].start({
         opacity: transform(dragAmount, [30, 150], [0, 1]),
         transition: {
           duration: 0,
         },
       })
-      nopeButtonAnim.start({
+      nopeButtonAnims[cardCounts].start({
         opacity: transform(dragAmount, [-30, -150], [0, 1]),
         transition: {
           duration: 0,
@@ -51,6 +52,7 @@ export function Card(): Override {
             duration: 1,
           },
         })
+        cardCounts = cardCounts - 1
       } else if (dragAmount < -150) {
         // swipe card right side
         dragX.stop()
@@ -61,22 +63,24 @@ export function Card(): Override {
             duration: 1,
           },
         })
+        cardCounts = cardCounts - 1
       }

       // Buttons Animation
-      likeButtonAnim.start({
+      likeButtonAnims[cardCounts].start({
         opacity: 0,
       })
-      nopeButtonAnim.start({
+      nopeButtonAnims[cardCounts].start({
         opacity: 0,
       })
     },
   }
 }

-var likeButtonAnim
+var likeButtonAnims = []
 export function LikeButton(): Override {
-  likeButtonAnim = useAnimation()
+  const likeButtonAnim = useAnimation()
+  likeButtonAnims.push(likeButtonAnim)
   return {
     initial: {
       opacity: 0,
@@ -85,9 +89,10 @@ export function LikeButton(): Override {
   }
 }

-var nopeButtonAnim
+var nopeButtonAnims = []
 export function NopeButton(): Override {
-  nopeButtonAnim = useAnimation()
+  const nopeButtonAnim = useAnimation()
+  nopeButtonAnims.push(nopeButtonAnim)
   return {
     initial: {
       opacity: 0,