initial toggle of derivs on team page when section being looked at

src/components/Team.css

@@ -46,13 +46,18 @@
 }
 
 .team-member {
+  perspective: 1000px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
 .team-member-image-container {
+  transform: rotateY(0deg);
+  transform-style: preserve-3d;
+  transform-origin: center;
+  transition: transform 0.75s;
   position: relative;
   width: 100%;
   border-radius: 2.4rem;
@@ -67,8 +72,14 @@
 }
 
 .team-member-image {
+  transform: rotateY(0deg);
+  position: relative;
+  top: 0;
+  left: 0;
   width: 100%;
   min-height: 100%;
+  opacity: 1;
+  transition: opacity 0.75s;
 }
 
 .team-member-image-overlay {
@@ -77,8 +88,24 @@
   left: 0;
   width: 100%;
   min-height: 100%;
+  transform: rotateY(180deg);
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.75s;
+}
+
+.team-member:hover .team-member-image-container,
+.team-member.active .team-member-image-container {
+  transform: rotateY(180deg);
+}
+
+.team-member:hover .team-member-image-container .team-member-image,
+.team-member.active .team-member-image-container .team-member-image {
+  opacity: 0;
+}
+
+.team-member:hover .team-member-image-container .team-member-image-overlay,
+.team-member.active .team-member-image-container .team-member-image-overlay {
+  opacity: 1;
 }
 
 .team-member-image-overlay > img {
@@ -99,7 +126,8 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 1rem;
-  transition: transform 0.3s;
+
+  transition: transform 1s;
   background: linear-gradient(
     to bottom,
     rgba(0, 0, 0, 0) 0%,
@@ -108,11 +136,11 @@
   transform: translateY(200%);
 }
 
-.team-member-image-overlay:hover {
-  opacity: 1;
+.team-member:hover .team-member-image-overlay-credit {
+  transform: translateY(0);
 }
 
-.team-member-image-overlay:hover > .team-member-image-overlay-credit {
+.team-member.active .team-member-image-overlay-credit {
   transform: translateY(0);
 }
 

src/components/Team.tsx

@@ -1,3 +1,4 @@
+import React, { useState, useEffect, useRef } from "react";
 import Section from "./Section";
 import "./Team.css";
 
@@ -122,14 +123,67 @@ const members: TeamMemberType[] = [
 ];
 
 const Team = () => {
+  const [hoverStatus, setHoverStatus] = useState(
+    Array(members.length).fill(false)
+  );
+  const sectionRef = useRef(null);
+
+  const cascadeEffect = (targetState) => {
+    let delay = 0;
+    hoverStatus.forEach((_, index) => {
+      setTimeout(() => {
+        setHoverStatus((prevStatus) => {
+          const newStatus = [...prevStatus];
+          newStatus[index] = targetState;
+          return newStatus;
+        });
+      }, delay);
+      delay += 250;
+    });
+    return delay;
+  };
+
+  const toggleEffect = () => {
+    const totalDelayForFirstCascade = cascadeEffect(true);
+    setTimeout(() => {
+      cascadeEffect(false);
+    }, totalDelayForFirstCascade + 1000);
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            toggleEffect();
+          }
+        });
+      },
+      { threshold: 0.5 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, [sectionRef, members.length]);
+
   return (
     <Section id="team">
-      <div className="team">
+      <div className="team" ref={sectionRef}>
         <h2 className="team-header">our team</h2>
         <div className="team-members">
           {members.map((member, index) => {
             return (
-              <div className="team-member" key={index}>
+              <div
+                className={`team-member ${hoverStatus[index] ? "active" : ""}`}
+                key={index}
+              >
                 <div className="team-member-image-container">
                   <img
                     src={member.image}

src/pages/index.astro

@@ -13,7 +13,7 @@ import Community from "../components/Community";
     <Hero client:load />
     <Why client:idle />
     <Browse client:load />
-    <Team />
+    <Team client:idle />
     <Blog />
     <Community client:idle />
   </main>