diff --git a/src/components/card/ThumbnailBlock.tsx b/src/components/card/ThumbnailBlock.tsx index 02e9ffb..bbd2710 100644 --- a/src/components/card/ThumbnailBlock.tsx +++ b/src/components/card/ThumbnailBlock.tsx @@ -140,10 +140,10 @@ export const ThumbnailBlock: React.FC = ({ ...(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 = ({ />
- + {title} diff --git a/src/components/marquee/MarqueeItem.tsx b/src/components/marquee/MarqueeItem.tsx index b7ea644..6d8c465 100644 --- 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( - ({ children, isAnimate, speed = 1, waitTime = 2000 }, forwardedRef) => { + ({ children, isAnimate, speed = 1, waitTime = 1500 }, forwardedRef) => { const { isPhoneSize } = useWindowSize(); const item = useRef(null!); const rect = useRef(null!);