Added framer motion, page transitions and layout changes in prod list

hernan-clich · Feb 13, 2022 · eec44e0 · eec44e0 · vercel · Feb 13, 2022
1 parent ee520d6
commit eec44e0
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 10 deletions.
diff --git a/app/screens/Home/components/Hero/index.tsx b/app/screens/Home/components/Hero/index.tsx
@@ -1,13 +1,23 @@
+import { motion } from 'framer-motion';
 import PATHS from '~constants/paths';
 import useWindowSize from '~hooks/useWindowSize';
 import HeaderBox from '../HeaderBox';
 import * as Styled from './styles';
 
+const MotionStyledHeroContainer = motion(Styled.HeroContainer);
+
 function Hero() {
   const { height, width } = useWindowSize();
 
   return (
-    <Styled.HeroContainer bgImg="/assets/hero_img.png" height={height} width={width}>
+    <MotionStyledHeroContainer
+      bgImg="/assets/hero_img.png"
+      height={height}
+      width={width}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      layout
+    >
       <HeaderBox
         asHtmlElement="h1"
         alignment={{ horizontal: 'left', vertical: 'center' }}
@@ -16,7 +26,7 @@ function Hero() {
         path={{ pathname: PATHS.PRODUCTS }}
         secondary
       />
-    </Styled.HeroContainer>
+    </MotionStyledHeroContainer>
   );
 }
 

diff --git a/app/screens/Home/components/SingleBox/index.tsx b/app/screens/Home/components/SingleBox/index.tsx
@@ -6,6 +6,7 @@ import { THTMLTextElements } from '~types/general';
 
 import * as Styled from './styles';
 import { defineHeight } from './utils';
+import { motion } from 'framer-motion';
 
 type Props = {
   bgImg: string;
@@ -16,14 +17,21 @@ type Props = {
   fontColor?: TFontColors;
 };
 
+const MotionStyledSingleBoxContainer = motion(Styled.SingleBoxContainer);
+
 function SingleBox({ asHtmlElement, bgImg, boxTitle, fontColor, path, squaredShape }: Props) {
   const { width } = useWindowSize();
 
   const elementHeight = defineHeight(width, squaredShape);
   const isSecondary = fontColor === EFontColors.secondary;
 
   return (
-    <Styled.SingleBoxContainer bgImg={bgImg} height={elementHeight}>
+    <MotionStyledSingleBoxContainer
+      bgImg={bgImg}
+      height={elementHeight}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+    >
       <HeaderBox
         alignment={{ horizontal: 'left', vertical: 'center' }}
         asHtmlElement={asHtmlElement}
@@ -32,7 +40,7 @@ function SingleBox({ asHtmlElement, bgImg, boxTitle, fontColor, path, squaredSha
         path={path}
         secondary={isSecondary}
       />
-    </Styled.SingleBoxContainer>
+    </MotionStyledSingleBoxContainer>
   );
 }
 

diff --git a/app/screens/ProductList/components/ProductCard/index.tsx b/app/screens/ProductList/components/ProductCard/index.tsx
@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import PATHS from '~constants/paths';
@@ -8,12 +9,14 @@ type Props = {
   product: TProduct;
 };
 
+const MotionStyledProductCardLink = motion(Styled.ProductCardLink);
+
 function ProductCard({ product }: Props) {
   const { id, imageUrl, name, sizes } = product;
 
   return (
     <Link href={{ pathname: PATHS.PRODUCT_DETAILS, query: { id: id } }}>
-      <Styled.ProductCardLink>
+      <MotionStyledProductCardLink layout>
         <Styled.ProductCardContainer>
           <div className="img">
             <Image src={imageUrl} alt={name} height={180} width={180} layout="fixed" />
@@ -23,7 +26,7 @@ function ProductCard({ product }: Props) {
             <p>$ {sizes?.[0]?.price}</p>
           </div>
         </Styled.ProductCardContainer>
-      </Styled.ProductCardLink>
+      </MotionStyledProductCardLink>
     </Link>
   );
 }

diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "clsx": "^1.1.1",
     "firebase": "^9.5.0",
     "firebase-admin": "^10.0.1",
+    "framer-motion": "^6.2.6",
     "js-cookie": "^3.0.1",
     "mercadopago": "^1.5.12",
     "next": "11.0.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,18 +1,24 @@
+import { motion } from 'framer-motion';
 import type { AppProps } from 'next/app';
 import DefaultHead from '~components/SEO/DefaultHead';
 import { AuthProvider } from '~hooks/useAuth';
 import GlobalStyles from '~styles/GlobalStyles';
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps, router }: AppProps) {
   return (
-    <>
+    <motion.div
+      key={router.route}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.75 }}
+    >
       <DefaultHead />
       <AuthProvider>
         <GlobalStyles>
           <Component {...pageProps} />
         </GlobalStyles>
       </AuthProvider>
-    </>
+    </motion.div>
   );
 }
 export default MyApp;
diff --git a/yarn.lock b/yarn.lock
@@ -174,7 +174,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -2633,6 +2633,26 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+framer-motion@^6.2.6:
+  version "6.2.6"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.6.tgz#75277b4944a1234beaf7453da19028bbf4f75cce"
+  integrity sha512-7eGav5MxEEzDHozQTDY6+psTIOw2i2kM1QVoJOC3bCp9VOKoo+mKR5n7aT5JPh7ksEKFYJYz0GJDils/9S+oLA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2890,6 +2910,11 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4103,6 +4128,16 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 postcss-value-parser@^4.0.2:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -4859,6 +4894,14 @@ stubs@^3.0.0:
   resolved "https://registry.yarnpkg.com/stubs/-/stubs-3.0.0.tgz#e8d2ba1fa9c90570303c030b6900f7d5f89abe5b"
   integrity sha1-6NK6H6nJBXAwPAMLaQD31fiavls=
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 styled-components@^5.3.0:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"