center center

assets/css/styles.css

@@ -829,6 +829,9 @@ tspan.cls-4 {
   position: relative;
   width: 100%;
   overflow-x: scroll;
+  display: flex;
+  /* To smoothly handle changes to the container dimensions or position */
+  /* transition: all 0.2s ease-in-out; */
 }
 .about__title {
   color: var(--text-color);
@@ -859,11 +862,11 @@ tspan.cls-4 {
 #universal_man {
   overflow: hidden;
   transition: all 0.5s ease-in-out;
-  max-width: 25vw;
+  max-width: 200px;
   width: 100%;
   height: auto;
   z-index: 20;
-  transform-origin: center;
+  transform-origin: center center;
 }
 
 .fa-primary {
@@ -965,7 +968,7 @@ div#doing-deck .deck-inner .deck-back {
   height: 100%;
   margin: auto;
   position: relative;
-  transition: transform 0.3s ease-in-out;
+  transition: transform 0.5s ease-in-out;
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
 }
 
@@ -980,6 +983,7 @@ div#doing-deck .deck-inner .deck-back {
   text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
+  transition: all 0.5s ease-in-out;
 }
 
 .playful-deck:hover .deck-inner {

assets/js/universal-man.js

@@ -21,7 +21,7 @@ window.onload = function () {
     y: -50,
     ease: "power1.out",
     scrollTrigger: {
-      trigger: ".universal-man",
+      trigger: ".about__title",
       start: "top 80%",
       end: "bottom 20%",
       toggleActions: "restart none none none",
@@ -60,16 +60,16 @@ window.onload = function () {
     });
 
     // 3D flip animation on hover
-    deck.addEventListener("mouseenter", () => {
-      gsap.to(deck.querySelector(".deck-inner"), {
+    deck.addEventListener("mouseenter", (event) => {
+      gsap.to(event.currentTarget.querySelector(".deck-inner"), {
         rotationY: 180,
         duration: 1,
         ease: "elastic.out(1, 0.3)",
       });
     });
 
-    deck.addEventListener("mouseleave", () => {
-      gsap.to(deck.querySelector(".deck-inner"), {
+    deck.addEventListener("mouseleave", (event) => {
+      gsap.to(event.currentTarget.querySelector(".deck-inner"), {
         rotationY: 0,
         duration: 1,
         ease: "elastic.out(1, 0.3)",
@@ -88,12 +88,15 @@ window.onload = function () {
       const direction = currentScroll > lastScroll ? 1 : -1;
       rotationSpeed = Math.max(1, Math.min(40, rotationSpeed + direction));
 
-      gsap.to(".universal-man", {
-        rotation: "+=" + 360 * direction,
-        duration: rotationSpeed,
+      let rotation = gsap.getProperty(".universal-man", "rotation");
+      gsap.set(".universal-man", {
+        rotation: rotation + rotationSpeed * direction,
         ease: "none",
       });
 
+      console.log("currentScroll:", currentScroll); // New line for debugging
+      console.log("rotation:", rotation); // New line for debugging
+
       lastScroll = currentScroll;
     },
   });