SOEOPSFY24-315 | explore fade-out timing variations for timeline imag…

…e overlay opacity

app/components/TimelineEven/TimelineItem.tsx

@@ -2,6 +2,7 @@ import { cnb } from "cnbuilder";
 import * as styles from "./TimelineItem.styles";
 import * as types from "./TimelineItem.types";
 import { Heading, Text } from "../Typography";
+import { AnimatePresence, motion, MotionProps } from "framer-motion";
 
 interface TimelineItemProps {
   heading: string;
@@ -10,6 +11,7 @@ interface TimelineItemProps {
   size?: types.SizeType;
   trapezoid?: types.TrapezoidType;
   className?: string;
+  animationProps?: MotionProps;
 }
 
 const TimelineItem = ({
@@ -19,45 +21,60 @@ const TimelineItem = ({
   size = "medium",
   trapezoid = "left",
   className,
+  animationProps,
   ...props
 }: TimelineItemProps) => {
   const imageSize = styles.size[size];
   const trapezoidType = styles.trapezoid[trapezoid];
 
   return (
     <div {...props} className={cnb("flex flex-col", className)}>
-      <button
-        className={cnb(
-          "group relative hocus:transform-none rounded-lg flex items-center justify-center",
-          trapezoidType,
-        )}
-      >
-        <div
+      <AnimatePresence>
+        <button
           className={cnb(
-            "aspect-[1/1] group relative perspective-600",
-            imageSize,
+            "group relative flex items-center justify-center",
+            trapezoidType,
           )}
         >
-          <img
-            alt=""
-            src={image}
-            className="inset-0 w-full h-full object-cover rounded-lg transform ease-in-out duration-500"
-          />
+          <div
+            className={cnb(
+              "aspect-[1/1] group relative perspective-600",
+              imageSize,
+            )}
+          >
+            <motion.div
+              {...animationProps}
+              className="absolute perspective-600 z-10 w-full h-full"
+            >
+              <div
+                className={cnb(
+                  "relative transform rounded-lg opacity-60 bg-digital-blue w-full h-full",
+                  trapezoidType,
+                  imageSize,
+                )}
+              />
+            </motion.div>
+            <img
+              alt=""
+              src={image}
+              className="inset-0 w-full h-full object-cover rounded-lg transform ease-in-out duration-500"
+            />
+          </div>
+        </button>
+        <div className="flex flex-col *:font-dm-sans">
+          <Heading className="type-0" weight="normal">
+            {heading}
+          </Heading>
+          <Text
+            font="serif"
+            variant="overview"
+            weight="normal"
+            className="order-first mt-28"
+          >
+            {year}
+          </Text>
         </div>
-      </button>
-      <div className="flex flex-col *:font-dm-sans">
-        <Heading className="type-0" weight="normal">
-          {heading}
-        </Heading>
-        <Text
-          font="serif"
-          variant="overview"
-          weight="normal"
-          className="order-first mt-28"
-        >
-          {year}
-        </Text>
-      </div>
+      </AnimatePresence>
     </div>
   );
 };

app/components/TimelineEven/TimelineOverview.tsx

@@ -19,15 +19,33 @@ type TimelineProps = {
   hasBorder?: boolean;
 };
 
+// Helper function to generate a random delay between a specified range
+function getRandomDelay(min = 0.5, max = 5) {
+  return Math.random() * (max - min) + min;
+}
+
+// Animation variant with random delay for overlay fade-out
+const overlayFadeOutVariant = {
+  visible: { opacity: 1 },
+  hidden: (custom: number) => ({
+    opacity: 0,
+    transition: {
+      duration: 1,
+      delay: custom, // Use the random delay
+    },
+  }),
+};
+
 const TimelineEven = ({ timelineData, hasBorder }: TimelineProps) => {
   const sizePattern: SizeType[] = ["large", "medium", "small"];
 
   return (
     <Container width="site" py={5} bgColor="fog-light" className="mb-50">
-      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 *:px-61">
+      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
         {timelineData.map((item, idx) => {
           const trapezoid = idx % 2 === 0 ? "right" : "left";
           const size = sizePattern[idx % sizePattern.length];
+          const randomDelay = getRandomDelay();
 
           return (
             <TimelineItem
@@ -36,10 +54,17 @@ const TimelineEven = ({ timelineData, hasBorder }: TimelineProps) => {
               size={size}
               trapezoid={trapezoid}
               className={cnb(
-                "rs-pb-8",
+                "rs-pb-8 px-61",
                 hasBorder &&
                   "border-r-3 border-black nth-2n:border-0 md:nth-2n:border-r-3 md:nth-3n:border-0 xl:nth-3n:border-r-3 xl:nth-4n:border-0",
               )}
+              animationProps={{
+                custom: randomDelay,
+                initial: "visible",
+                animate: "hidden",
+                exit: "visible",
+                variants: overlayFadeOutVariant,
+              }}
             />
           );
         })}