Hocus rotation on the card image

SU-SOE · Jan 31, 2025 · 9aefe08 · 9aefe08
1 parent dd5a0ed
commit 9aefe08
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/components/Animate/AnimationMap.ts b/components/Animate/AnimationMap.ts
@@ -125,5 +125,34 @@ export const AnimationMap = {
       height: "auto",
     },
   },
+  rotateInLeft: {
+    hidden: {
+      opacity: 0,
+      rotateY: 0,
+    },
+    hiddenReduced: {
+      opacity: 0,
+      rotateY: 0,
+    },
+    visible: {
+      opacity: 1,
+      rotateY: 15,
+    },
+  },
+  rotateInRight: {
+    hidden: {
+      opacity: 0,
+      rotateY: 0,
+    },
+    hiddenReduced: {
+      opacity: 0,
+      rotateY: 0,
+    },
+    visible: {
+      opacity: 1,
+      rotateY: -15,
+    },
+  },
 };
+
 export type AnimationType = keyof typeof AnimationMap | "none";
diff --git a/components/Timeline/TimelineAnimateImage.tsx b/components/Timeline/TimelineAnimateImage.tsx
@@ -1,6 +1,7 @@
 "use client";
 import Image from "next/image";
 import { cnb } from "cnbuilder";
+import { AnimateInView } from "@/components/Animate";
 import * as styles from "./Timeline.styles";
 import * as types from "./Timeline.types";
 import { motion } from "motion/react";
@@ -29,16 +30,12 @@ export const TimelineAnimateImage = ({
         className,
       )}
     >
-      <motion.div
-        initial={{ rotateY: 0, opacity: 0 }}
-        whileInView={{
-          rotateY: trapezoidAngle === "left" ? 15 : -15,
-          opacity: 1,
-        }}
-        viewport={{ once: true, amount: 0.3 }} // Trigger animation when 30% of it is visible
-        transition={{ delay: 1.5, duration: 2, ease: "easeInOut" }}
+      <AnimateInView
+        animation={trapezoidAngle === "left" ? "rotateInLeft" : "rotateInRight"}
+        delay={1.5}
+        duration={2}
         className={cnb(
-          "aspect-[1/1] relative h-full flex items-center justify-center group-focus-within:!rotate-y-0 group-hover-within:!rotate-y-0 group-hover:!rotate-y-0 group-focus:!rotate-y-0",
+          "aspect-[1/1] relative h-full flex items-center justify-center group-hover/cardroot:![transform:rotateY(0deg)] group-focus-within/cardroot:![transform:rotateY(0deg)] duration-300",
           imageSize,
         )}
       >
@@ -48,7 +45,7 @@ export const TimelineAnimateImage = ({
           fill
           className="z-0 object-cover rounded-[20px] shadow-lg"
         />
-      </motion.div>
+      </AnimateInView>
     </div>
   );
 };
diff --git a/components/Timeline/TimelineHorizontalCard.tsx b/components/Timeline/TimelineHorizontalCard.tsx
@@ -44,7 +44,7 @@ export const TimelineHorizontalCard = ({
     <AsComponent
       {...props}
       className={cnb(
-        "h-fit relative group",
+        "h-fit relative group/cardroot",
         bgColor ? styles.bgColors[bgColor] : "",
         py ? paddingVerticals[py] : "",
         pt ? paddingTops[pt] : "",
@@ -67,15 +67,15 @@ export const TimelineHorizontalCard = ({
               className={styles.heading}
             >
               <Link
-                className="font-inherit stretched-link"
+                className="font-inherit stretched-link hocus-visible:decoration-stone-dark"
                 href={`/timeline#${anchor}`}
               >
                 {heading}
                 <span className="whitespace-nowrap">
                   &#65279;
                   <ArrowRightIcon
                     width={25}
-                    className="transition-all ease-in-out duration-1000 ml-03em group-hover:translate-x-02em group-focus:translate-x-02em text-digital-red-light inline"
+                    className="transition-all ease-in-out duration-1000 ml-03em group-hover/cardroot:translate-x-02em group-focus-within/cardroot:translate-x-02em text-digital-red-light inline"
                   />
                 </span>
               </Link>