[add] add timeout param

ymuichiro · Nov 18, 2023 · d58c4d5 · d58c4d5
1 parent 1f7eea3
commit d58c4d5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/atom/InViewAnimation.tsx b/src/components/atom/InViewAnimation.tsx
@@ -6,6 +6,7 @@ import { useInView } from 'react-intersection-observer';
 interface Props {
   direction?: 'up' | 'down' | 'left' | 'right';
   threshold?: number;
+  timeout?: number;
   style?: React.CSSProperties;
   children: React.ReactNode;
 }
@@ -25,9 +26,9 @@ export default function InViewAnimation(props: Props): JSX.Element {
 
   return (
     <div ref={ref} style={props.style}>
-      <Slide in={isView} direction={props.direction ?? 'up'} timeout={1000} style={{ height: '100%' }}>
+      <Slide in={isView} direction={props.direction ?? 'up'} timeout={props.timeout ?? 1000} style={{ height: '100%' }}>
         <div style={{ height: '100%' }}>
-          <Fade in={isView} timeout={1000} style={{ height: '100%' }}>
+          <Fade in={isView} timeout={props.timeout ?? 1000} style={{ height: '100%' }}>
             <div>{props.children}</div>
           </Fade>
         </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -121,7 +121,7 @@ const Home: NextPage<Props> = ({ i18n, newsReleases, locale }) => {
           </section>
           {/* 最初の説明セクション */}
           <section>
-            <InViewAnimation threshold={0.3} direction='right'>
+            <InViewAnimation threshold={0.2} timeout={800} direction='right'>
               <SubTitle align='center' style={{ marginBottom: '15vh' }}>
                 {i18n.history_title1}
               </SubTitle>