feat: add fade in of overlay icons

green-ecolution · Jun 23, 2024 · 99fca3a · 99fca3a
1 parent 6232ba3
commit 99fca3a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/tsx/components/homepage/HomepageOverlay.tsx b/src/tsx/components/homepage/HomepageOverlay.tsx
@@ -62,8 +62,8 @@ const HomepageOverlay: React.FC<HomepageOverlayProps> = ({ initialLoad, isOverla
 
     return (
         <section
-            className={`hidden fixed inset-0 transition-all ease-in-out duration-1500 xl:block ${
-                isOverlayVisible ? 'bg-grey-900 bg-opacity-80 z-50' : 'bg-opacity-0 -z-10'
+            className={`hidden fixed inset-0 transition-all ease-in-out duration-1500 xl:block
+                ${isOverlayVisible ? 'bg-grey-900 bg-opacity-80 z-[100]' : 'bg-opacity-0 -z-10'
             }`}
         >
             <div className="relative mx-auto h-screen w-screen max-w-screen-3xl">
@@ -110,7 +110,10 @@ const HomepageOverlay: React.FC<HomepageOverlayProps> = ({ initialLoad, isOverla
                     </button>
                 </article>
 
-                {isPopupVisible && isOverlayVisible && <HomepageOverlayIcons index={currentPopupIndex} delay={delay} />}
+                <HomepageOverlayIcons
+                    areIconsVisible={isPopupVisible && isOverlayVisible}
+                    index={currentPopupIndex}
+                    delay={delay} />
             </div>
         </section>
     );

diff --git a/src/tsx/components/homepage/HomepageOverlayIcons.tsx b/src/tsx/components/homepage/HomepageOverlayIcons.tsx
@@ -3,15 +3,20 @@ import React, { useEffect, useState } from "react";
 interface HomepageOverlayIconsProps {
     index: number;
     delay: number;
+    areIconsVisible: boolean;
 }
 
-const HomepageOverlayIcons: React.FC<HomepageOverlayIconsProps> = ({ index, delay }) => {
+const HomepageOverlayIcons: React.FC<HomepageOverlayIconsProps> = ({ index, delay, areIconsVisible }) => {
     const [initialDelayOver, setInitialDelayOver] = useState(false);
 
     useEffect(() => {
-        const timer = setTimeout(() => { setInitialDelayOver(true) }, delay);
-        return () => clearTimeout(timer);
-    }, []);
+        if (! areIconsVisible) {
+            setInitialDelayOver(false);
+        } else {
+            const timer = setTimeout(() => { setInitialDelayOver(true) }, delay);
+            return () => clearTimeout(timer);
+        }
+    }, [areIconsVisible, delay]);
 
     const icons = [
         {
@@ -53,19 +58,19 @@ const HomepageOverlayIcons: React.FC<HomepageOverlayIconsProps> = ({ index, dela
     ];
 
     return (
-        <div className="hidden xl:block">
+        <div className={`hidden transition-all ease-in-out duration-300 xl:block ${areIconsVisible ? 'opacity-100 delay-100' : 'opacity-0'}`}>
             {icons.map((icon, key) => (
                 <figure
                     key={key}
                     aria-hidden="true"
-                    className={`absolute rounded-full flex items-center justify-center bg-white bg-opacity-0 transition-opacity duration-300 ease-in-out before:bg-white/30 before:transition-transform before:duration-300 before:ease-in-out before:absolute before:-z-10 before:rounded-full after:absolute after:border-dotted after:transition-opacity after:duration-300 after:ease-in-out
+                    className={`absolute rounded-full flex items-center justify-center bg-white bg-opacity-0 transition-all duration-300 ease-in-out before:bg-white/30 before:transition-all before:duration-300 before:ease-in-out before:absolute before:-z-10 before:rounded-full after:absolute after:border-dotted after:transition-all after:duration-300 after:ease-in-out
                         ${key > 2 ? 'after:border-t-[6px] after:border-t-white' : 'after:border-l-[6px] after:border-l-white'}
                         ${icon.figureClasses}
                         ${initialDelayOver ? (icon.activeOnIndex.includes(index) ? 'bg-opacity-100 before:animate-pulse before:scale-100 after:opacity-100' : 'before:scale-90 after:opacity-0') : 'bg-opacity-100 before:animate-pulse before:scale-100 after:opacity-100'}`}
                 >
                     <img
                         src={icon.icon} alt=""
-                        className={`object-contain ${icon.imageClasses} transition-opacity duration-300 ease-in-out ${initialDelayOver ? (icon.activeOnIndex.includes(index) ? 'opacity-100' : 'opacity-0') : 'opacity-100'}`} />
+                        className={`object-contain ${icon.imageClasses} transition-all duration-300 ease-in-out ${initialDelayOver ? (icon.activeOnIndex.includes(index) ? 'opacity-100' : 'opacity-0') : 'opacity-100'}`} />
                 </figure>
             ))}
         </div>