update ProjectCard transition

once-ui-system · Sep 11, 2024 · e1adcb9 · e1adcb9
1 parent 6f7359d
commit e1adcb9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/src/app/components/ProjectCard.tsx b/src/app/components/ProjectCard.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { AvatarGroup, Flex, Heading, SmartImage, SmartLink, Text } from "@/once-ui/components";
-import { useState } from "react";
+import { AvatarGroup, Flex, Heading, RevealFx, SmartImage, SmartLink, Text } from "@/once-ui/components";
+import { useEffect, useState } from "react";
 
 interface ProjectCardProps {
     href: string;
@@ -23,22 +23,36 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
     const [activeIndex, setActiveIndex] = useState(0);
     const [isTransitioning, setIsTransitioning] = useState(false);
 
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsTransitioning(true);
+        }, 1000);
+
+        return () => clearTimeout(timer);
+    }, []);
+
     const handleImageClick = () => {
-        setIsTransitioning(true);
-        const nextIndex = (activeIndex + 1) % images.length;
-        setTimeout(() => {
-            setActiveIndex(nextIndex);
+        if(images.length > 1) {
             setIsTransitioning(false);
-        }, 200);
+            setTimeout(() => {
+                const nextIndex = (activeIndex + 1) % images.length;
+                setActiveIndex(nextIndex);
+                setTimeout(() => {
+                    setIsTransitioning(true);
+                }, 630);
+            }, 630);
+        }
     };
-
+    
     const handleControlClick = (index: number) => {
         if (index !== activeIndex) {
             setIsTransitioning(true);
             setTimeout(() => {
                 setActiveIndex(index);
-                setIsTransitioning(false);
-            }, 200);
+                setTimeout(() => {
+                    setIsTransitioning(false);
+                }, 630);
+            }, 630);
         }
     };
 
@@ -47,20 +61,24 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
             fillWidth gap="m"
             direction="column">
             <Flex onClick={handleImageClick}>
-                <SmartImage
-                    tabIndex={0}
-                    radius="l"
-                    alt={title}
-                    aspectRatio="16 / 9"
-                    src={images[activeIndex]}
-                    style={{
-                        ...(images.length > 1 && {
-                            cursor: 'pointer',
+            <RevealFx
+                    style={{width: '100%'}}
+                    delay={0.4}
+                    trigger={isTransitioning}
+                    speed="fast">
+                    <SmartImage
+                        tabIndex={0}
+                        radius="l"
+                        alt={title}
+                        aspectRatio="16 / 9"
+                        src={images[activeIndex]}
+                        style={{
                             border: '1px solid var(--neutral-alpha-weak)',
-                            opacity: isTransitioning ? 0.2 : 1,
-                            transition: 'opacity 0.2s ease',
-                        }),
-                    }}/>
+                            ...(images.length > 1 && {
+                                cursor: 'pointer',
+                            }),
+                        }}/>
+                </RevealFx>
             </Flex>
             {images.length > 1 && (
                 <Flex

diff --git a/src/once-ui/components/RevealFx.module.scss b/src/once-ui/components/RevealFx.module.scss
@@ -6,12 +6,12 @@
     transition: all ease-in-out;
 
     &.hidden {
-      mask-position: 100% 0;
-      filter: blur(0.5rem);
+		mask-position: 100% 0;
+		filter: blur(0.5rem);
     }
 
     &.revealed {
-      mask-position: 0 0;
-      filter: blur(0);
+		mask-position: 0 0;
+		filter: blur(0);
     }
 }
diff --git a/src/once-ui/components/RevealFx.tsx b/src/once-ui/components/RevealFx.tsx
@@ -43,7 +43,7 @@ const RevealFx = forwardRef<HTMLSpanElement, RevealFxProps>(({
 	const getSpeedDuration = () => {
 		switch (speed) {
 			case 'fast':
-				return '1.5s';
+				return '1s';
 			case 'medium':
 				return '2s';
 			case 'slow':