Add slide in animation

michalzalobny · Sep 5, 2022 · 30711c8 · 30711c8 · vercel · Sep 5, 2022
1 parent b0fc7f0
commit 30711c8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/frontend/src/containers/Examples/1/ExamplePage.styles.ts b/frontend/src/containers/Examples/1/ExamplePage.styles.ts
@@ -1,7 +1,9 @@
-import styled, { css } from 'styled-components';
-import { underline, s1 } from 'utils/sharedStyled';
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
 
+import { underline, s1 } from 'utils/sharedStyled';
 import { media } from 'utils/media';
+import { sharedValues } from 'utils/sharedValues';
 
 export const ScrollContainer = styled.div`
   position: absolute;
@@ -14,7 +16,7 @@ export const ScrollContainer = styled.div`
   background: white;
 `;
 
-export const Wrapper = styled.div`
+export const Wrapper = styled(motion.div)`
   margin: 120px auto;
 
   width: 85%;
@@ -28,6 +30,23 @@ export const Wrapper = styled.div`
   }
 `;
 
+Wrapper.defaultProps = {
+  variants: {
+    initial: {
+      opacity: 0,
+      y: '5vh',
+    },
+    animate: {
+      opacity: 1,
+      y: '0vh',
+      transition: {
+        delay: 0.3,
+        ...sharedValues.motion.springSlow,
+      },
+    },
+  },
+};
+
 export const GithubWrapper = styled.div`
   display: initial;
   position: fixed;

diff --git a/frontend/src/containers/Examples/1/ExamplePage.tsx b/frontend/src/containers/Examples/1/ExamplePage.tsx
@@ -31,7 +31,7 @@ export default function ExamplePage(props: Props) {
       </S.GithubWrapper>
       <Head />
       <S.ScrollContainer ref={scrollContainerRef}>
-        <S.Wrapper>
+        <S.Wrapper initial="initial" animate="animate">
           {gameAssets.map((item, key) => (
             <GameTile
               itemKey={key}

diff --git a/frontend/src/utils/sharedValues.ts b/frontend/src/utils/sharedValues.ts
@@ -24,6 +24,19 @@ export const sharedValues = {
     LERP_EASE: 0.07,
     MOMENTUM_DAMPING: 0.8,
     MOMENTUM_CARRY: 0.6,
+    tween2: {
+      type: 'tween',
+      ease: [0.64, 0.02, 0.16, 0.97],
+      duration: 0.8,
+    },
+    springSlow: {
+      type: 'spring',
+      stiffness: 350,
+      damping: 80,
+      mass: 5,
+      restDelta: 0.001,
+      restSpeed: 0.001,
+    },
   },
   ISR_TIMEOUT: 5,
 };