From 6c4142b4d4442e34b7e7b7581d1354f6fbd9de12 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Fri, 3 Jan 2025 20:03:03 -0600
Subject: [PATCH] better card flip

---
 .../discourse/components/rewind.gjs           | 28 +++++++++----------
 assets/stylesheets/common/card.scss           | 23 ++++++++-------
 assets/stylesheets/common/rewind.scss         | 19 +------------
 3 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/assets/javascripts/discourse/components/rewind.gjs b/assets/javascripts/discourse/components/rewind.gjs
index 6b4d824..6df102e 100644
--- a/assets/javascripts/discourse/components/rewind.gjs
+++ b/assets/javascripts/discourse/components/rewind.gjs
@@ -69,20 +69,20 @@ export default class Rewind extends Component {
       children[i].style.transform = `translateY(-${
         (target.scrollTop * (i + 1)) / 5
       }px)`;
-      if (
-        children[i].classList.contains("background-2") &&
-        target.scrollTop % 6 === 0
-      ) {
-        children[i].style.setProperty(
-          "--frame",
-          `var(--frame-${this.imageIndex})`
-        );
-        if (this.imageIndex === 10) {
-          this.imageIndex = 1;
-        } else {
-          this.imageIndex++;
-        }
-      }
+      // if (
+      //   children[i].classList.contains("background-2") &&
+      //   target.scrollTop % 6 === 0
+      // ) {
+      //   children[i].style.setProperty(
+      //     "--frame",
+      //     `var(--frame-${this.imageIndex})`
+      //   );
+      //   if (this.imageIndex === 10) {
+      //     this.imageIndex = 1;
+      //   } else {
+      //     this.imageIndex++;
+      //   }
+      // }
     }
   }
 
diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss
index 7961357..f528cc3 100644
--- a/assets/stylesheets/common/card.scss
+++ b/assets/stylesheets/common/card.scss
@@ -34,17 +34,16 @@ body {
     height: 100%;
     text-align: center;
     transform-style: preserve-3d;
-    transform: rotateY(0) scale(1);
-  }
-  &:hover {
-    z-index: 999;
+    transition: transform;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
   }
   &:hover .rewind-card__inner {
-    animation-name: flip-zoom;
-    animation-direction: normal;
-    animation-fill-mode: both;
-    animation-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
-    animation-duration: 0.5s;
+    transform: rotateY(180deg);
+  }
+  &:hover {
+    animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
+    z-index: 999;
   }
   .rewind-card.-back {
     transform: rotateY(180deg);
@@ -61,13 +60,13 @@ body {
 
 @keyframes flip-zoom {
   0% {
-    transform: rotateY(0) scale(1);
+    transform: scale(1);
   }
   50% {
-    transform: rotateY(0) scale(0.9);
+    transform: scale(0.9);
   }
   100% {
-    transform: rotateY(180deg) scale(1.25);
+    transform: scale(1.25);
   }
 }
 
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index 69185b0..9548f6d 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -1,17 +1,3 @@
-:root {
-  --frame-1: url(/plugins/discourse-rewind/images/bg-frames/bg-2_1.png);
-  --frame-2: url(/plugins/discourse-rewind/images/bg-frames/bg-2_2.png);
-  --frame-3: url(/plugins/discourse-rewind/images/bg-frames/bg-2_3.png);
-  --frame-4: url(/plugins/discourse-rewind/images/bg-frames/bg-2_4.png);
-  --frame-5: url(/plugins/discourse-rewind/images/bg-frames/bg-2_5.png);
-  --frame-6: url(/plugins/discourse-rewind/images/bg-frames/bg-2_6.png);
-  --frame-7: url(/plugins/discourse-rewind/images/bg-frames/bg-2_7.png);
-  --frame-8: url(/plugins/discourse-rewind/images/bg-frames/bg-2_8.png);
-  --frame-9: url(/plugins/discourse-rewind/images/bg-frames/bg-2_9.png);
-  --frame-10: url(/plugins/discourse-rewind/images/bg-frames/bg-2_10.png);
-  --frame-11: url(/plugins/discourse-rewind/images/bg-frames/bg-2_11.png);
-}
-
 .rewind-container {
   border-radius: var(--d-border-radius);
   box-sizing: border-box;
@@ -61,15 +47,12 @@
 }
 
 .background-2 {
-  --frame: var(--frame-1);
   position: absolute;
   width: 100%;
   height: 1000%;
-  background: var(--frame);
+  background: url(/plugins/discourse-rewind/images/bg-2.png);
   background-size: contain;
   transform: translateY(0px);
-  will-change: background;
-  backface-visibility: hidden;
 }
 
 .rewind__scroll-wrapper {