home animation

assets/css/src/pages/_home.scss

@@ -27,11 +27,19 @@
       opacity: 0;
       transition: opacity 0.01s ease-in-out;
 
-      animation: flip 20s var(--curve) infinite;
+      animation: flip 3s var(--curve) infinite;
 
       &.active {
         opacity: 1;
       }
     }
   }
+
+  #log-angle {
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 1rem;
+    background-color: #fff;
+  }
 }

assets/js/characters/roll.js

@@ -8,6 +8,7 @@ export function initFlipCarousel() {
   ];
 
   const outfits = document.querySelectorAll(".identity .outfit");
+  const container = document.querySelector(".identity");
   let currentIndex = 0;
   let lastSwitch = 0;
 
@@ -37,22 +38,29 @@ export function initFlipCarousel() {
     lastSwitch = now;
   };
 
-  const switchAngles = [-90, -180];
-  const container = document.querySelector(".identity");
-  if (container) {
+  const getAngle = () => {
     const outfit = container.querySelector(".outfit.active");
-    if (outfit) {
-      const logAngle = () => {
-        const angle = Math.round(getRotateX(outfit));
-        requestAnimationFrame(logAngle);
+    return Math.round(getRotateX(outfit));
+  };
 
-        console.log(angle);
-        if (angle === -90 || angle === 135) {
-          switchImage();
-        }
-      };
-      requestAnimationFrame(logAngle);
+  const rollOutfit = () => {
+    const angle = getAngle();
+    requestAnimationFrame(rollOutfit);
+
+    const targetAngle = currentIndex % 2 ? 90 : -90;
+    if (Math.abs(angle - targetAngle) <= 8) {
+      console.log(angle);
+      switchImage();
     }
+  };
+
+  if (container) {
+    requestAnimationFrame(rollOutfit);
+
+    document.getElementById("log-angle")?.addEventListener("click", () => {
+      const angle = getAngle();
+      console.log(angle);
+    });
   }
 
   return { images, getRotateX, switchImage };

site/templates/home.php

@@ -6,4 +6,5 @@
   <img src="<?= url('assets/images/characters/characters-spring.svg') ?>" alt="" class="outfit">
   <img src="<?= url('assets/images/characters/characters-sunglasses.svg') ?>" alt="" class="outfit">
 </div>
+<button id="log-angle">log angle</button>
 <?php snippet('footer') ?>