fix:

mnsinri · Sep 4, 2023 · 7613acb · 7613acb
1 parent d99e837
commit 7613acb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/src/components/card/ThumbnailBlock.tsx b/src/components/card/ThumbnailBlock.tsx
@@ -140,10 +140,10 @@ export const ThumbnailBlock: React.FC<ThumbnailBlockProps> = ({
     ...(isPhoneSize ? mobileSpringConfig : {}),
   });
 
-  const { opacity } = useSpring({
-    opacity: isExpand ? 1 : 0,
+  const { x } = useSpring({
+    x: isExpand ? 1 : 0,
     config: {
-      duration: 250,
+      duration: 500,
       easing: easings.easeOutExpo,
     },
   });
@@ -160,10 +160,12 @@ export const ThumbnailBlock: React.FC<ThumbnailBlockProps> = ({
       />
       <Header>
         <Icon src={icon} alt={name} style={{ filter: shadow }} loading="lazy" />
-        <Contents style={{ opacity }}>
+        <Contents
+          style={{ opacity: x.to({ range: [0, 0.75, 1], output: [0, 0, 1] }) }}
+        >
           <MarqueeTitle
-            isAnimate={config.isMarquee}
-            speed={hovered ? speed / 2 : speed}
+            isAnimate={config.isMarquee && isExpand}
+            speed={config.isExpandAlways && hovered ? speed / 2 : speed}
           >
             {title}
           </MarqueeTitle>

diff --git a/src/components/marquee/MarqueeItem.tsx b/src/components/marquee/MarqueeItem.tsx
@@ -1,10 +1,4 @@
-import React, {
-  ReactNode,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
+import React, { ReactNode, forwardRef, useEffect, useRef } from "react";
 import styled from "styled-components";
 import { useAnimationFrame, useWindowSize } from "../../hooks";
 import { mergeRefs } from "react-merge-refs";
@@ -22,7 +16,7 @@ type Props = {
 };
 
 export const MarqueeItem = forwardRef<HTMLDivElement, Props>(
-  ({ children, isAnimate, speed = 1, waitTime = 2000 }, forwardedRef) => {
+  ({ children, isAnimate, speed = 1, waitTime = 1500 }, forwardedRef) => {
     const { isPhoneSize } = useWindowSize();
     const item = useRef<HTMLDivElement>(null!);
     const rect = useRef<DOMRect>(null!);