feat: added animations with framer-motion

KrustyC · Feb 4, 2024 · d943835 · d943835
1 parent ae293fe
commit d943835
Show file tree

Hide file tree

Showing 10 changed files with 311 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@vercel/speed-insights": "^1.0.9",
     "classnames": "^2.5.1",
     "contentful": "^10.6.21",
+    "framer-motion": "^11.0.3",
     "next": "^14.1.0",
     "prisma": "^5.9.1",
     "react": "^18.2.0",

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+
 import { DribbleIcon } from "@/icons/Dribble";
 import { FlickrIcon } from "@/icons/Flickr";
 import { InstagramIcon } from "@/icons/Instagram";
@@ -9,6 +13,28 @@ import {
   LINKEDIN_LINK,
 } from "@/utils/constants";
 
+const iconsVariants: Variants = {
+  offscreen: {
+    y: 20,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      y: {
+        type: "spring",
+        bounce: 0.8,
+        duration: 3,
+      },
+      opacity: {
+        bounce: 0,
+        duration: 0.3,
+      },
+    },
+  },
+};
+
 export const Footer: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className="flex h-[136px] lg:h-[166px] flex-col-reverse lg:flex-row items-center justify-center lg:items-end lg:justify-between py-12 px-8 md:px-16 lg:px-24 bg-[#EDB8B8]">
@@ -18,43 +44,53 @@ export const Footer: React.FC<React.PropsWithChildren<unknown>> = () => {
 
       <div className="flex items-center lg:items-end h-24 mb-2 lg:mb-0">
         <div className="text-right">
-          <div className="flex items-center justify-end">
-            <a
+          <motion.div
+            className="flex items-center justify-end"
+            initial="offscreen"
+            whileInView="onscreen"
+            viewport={{ once: true, amount: 0.7 }}
+            transition={{ staggerChildren: 0.4 }}
+          >
+            <motion.a
+              variants={iconsVariants}
               className="bg-[#EDB8B8] h-10 w-10 lg:h-14 lg:w-14 flex justify-center items-center mr-2 lg:mr-4 rounded-full px-1 md:px-0"
               href={INSTAGRAM_LINK}
               target="_blank"
               rel="noopener noreferrer"
             >
               <InstagramIcon className="hover:animate-wiggle h-10 w-10 lg:h-14 lg:w-14 text-[#C89191]" />
-            </a>
+            </motion.a>
 
-            <a
+            <motion.a
+              variants={iconsVariants}
               className="bg-[#EDB8B8] h-10 w-10 lg:h-14 lg:w-14 flex justify-center items-center mr-2 lg:mr-4 rounded-full px-1 md:px-0"
               href={DRIBBLE_LINK}
               target="_blank"
               rel="noopener noreferrer"
             >
               <DribbleIcon className="hover:animate-wiggle h-10 w-10 lg:h-14 lg:w-14 text-[#C89191]" />
-            </a>
+            </motion.a>
 
-            <a
+            <motion.a
+              variants={iconsVariants}
               className="bg-[#EDB8B8] h-10 w-10 lg:h-14 lg:w-14 flex justify-center items-center mr-2 lg:mr-4 rounded-full px-1 md:px-0"
               href={FLICKR_LINK}
               target="_blank"
               rel="noopener noreferrer"
             >
               <FlickrIcon className="hover:animate-wiggle h-10 w-10 lg:h-14 lg:w-14 text-[#C89191]" />
-            </a>
+            </motion.a>
 
-            <a
+            <motion.a
+              variants={iconsVariants}
               className="bg-[#EDB8B8] h-10 w-10 lg:h-14 lg:w-14 flex justify-center items-center rounded-full px-1 md:px-0"
               href={LINKEDIN_LINK}
               target="_blank"
               rel="noopener noreferrer"
             >
               <LinkedInIcon className="hover:animate-wiggle h-10 w-10 lg:h-14 lg:w-14 text-[#C89191]" />
-            </a>
-          </div>
+            </motion.a>
+          </motion.div>
         </div>
       </div>
     </div>

diff --git a/src/components/Home/Hero.tsx b/src/components/Home/Hero.tsx
@@ -1,28 +1,59 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+
 import { Navbar } from "../Navbar";
 
+const variants: Variants = {
+  offscreen: {
+    y: 10,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: "spring",
+      duration: 1,
+    },
+  },
+};
+
 export const Hero = () => (
   <div className="bg-[#EDB8B8] flex flex-col">
     <Navbar />
     <div className="w-full flex px-8 md:px-16 lg:px-32 xl:px-60 pt-12 lg:pt-28 pb-12 lg:pb-24 mx-auto">
-      <div className="flex flex-col mx-auto text-left text-black">
-        <p className="block lg:hidden mb-4 text-sm">
+      <motion.div
+        className="flex flex-col mx-auto text-left text-black"
+        initial="offscreen"
+        whileInView="onscreen"
+        viewport={{ once: true, amount: 0.7 }}
+        transition={{ staggerChildren: 0.3 }}
+      >
+        <motion.p className="block lg:hidden mb-4 text-sm" variants={variants}>
           Have no fear of perfection
           <br />— you{"'"}ll never reach it. {"–"} Salvador Dali
-        </p>
-        <p className="lg:mb-4 hidden lg:block text-sm">
+        </motion.p>
+        <motion.p
+          className="lg:mb-4 hidden lg:block text-sm"
+          variants={variants}
+        >
           Have no fear of perfection—you{"'"}ll never reach it.
           {"–"} Salvador Dali
-        </p>
-        <div className="w-full md:w-3/4 leading-[1.9rem] md:leading-[2.5rem] text-xl md:text-3xl font-[500] lg:font-[400]">
+        </motion.p>
+        <motion.div
+          className="w-full md:w-3/4 leading-[1.9rem] md:leading-[2.5rem] text-xl md:text-3xl font-[500] lg:font-[400]"
+          variants={variants}
+        >
           <p>
             Working in multidisciplinary environments and different design areas
             including: 2D/3D graphics, 3D interiors and UX/UI strategy. I{"'"}m
             a true believer in working ways around things to try and make them
             environmentally less impactful, more ethical and always try to be
             aware of the bigger picture.
           </p>
-        </div>
-      </div>
+        </motion.div>
+      </motion.div>
     </div>
   </div>
 );
diff --git a/src/components/Home/Projects/Filterbar.tsx b/src/components/Home/Projects/Filterbar.tsx
@@ -1,32 +1,77 @@
 "use client";
 
 import { useContext } from "react";
+import { motion, Variants } from "framer-motion";
 
 import { ProjectsFilterContext } from "@/contexts/ProjectsFilterContext";
 import { ProjectCategory } from "@/types/global";
 
 const EXCLUDED_CATEGORIES = ["ALL", "PACKAGING_AND_UI"];
 
+const mainButtonVariants: Variants = {
+  offscreen: {
+    opacity: 0,
+  },
+  onscreen: {
+    opacity: 1,
+    transition: {
+      type: "spring",
+      duration: 1,
+    },
+  },
+};
+
+const normalFiltersVariants: Variants = {
+  offscreen: {
+    y: 20,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      opacity: {
+        type: "spring",
+        bounce: 0,
+        duration: 0.2,
+      },
+      y: {
+        type: "spring",
+        bounce: 0.6,
+        duration: 2,
+      },
+    },
+  },
+};
+
 export const Filterbar: React.FC = () => {
   const { currentFilter, setCurrentFilter } = useContext(ProjectsFilterContext);
 
   return (
     <div className="sticky top-0 h-28 bg-[#E5E4E2] z-50">
-      <div className="h-full px-4 md:px-16 lg:px-32 xl:px-60 flex font-light items-center justify-between text-bodoni tracking-wide uppercase overflow-x-auto">
-        <div
+      <motion.div
+        className="h-full px-4 md:px-16 lg:px-32 xl:px-60 flex font-light items-center justify-between text-bodoni tracking-wide uppercase overflow-x-auto"
+        initial="offscreen"
+        whileInView="onscreen"
+        viewport={{ once: true, amount: 0.7 }}
+        transition={{ staggerChildren: 0.4 }}
+      >
+        <motion.div
           className={`whitespace-nowrap cursor-pointer tracking-[0.35em] animated-filter min-w-fit ${
             currentFilter === undefined ? "active" : ""
           }`}
+          variants={mainButtonVariants}
           onClick={() => setCurrentFilter(undefined)}
         >
           All Projects
-        </div>
+        </motion.div>
         {Object.entries(ProjectCategory)
           .filter(([key]) => !EXCLUDED_CATEGORIES.includes(key))
           .map(([key, value]) => (
-            <div
+            <motion.div
               key={key}
               className="ml-12 lg:ml-8 xl:ml-0 text-black tracking-[0.35em] cursor-pointer"
+              variants={normalFiltersVariants}
               onClick={() => setCurrentFilter(value)}
             >
               <p
@@ -36,9 +81,9 @@ export const Filterbar: React.FC = () => {
               >
                 {value}
               </p>
-            </div>
+            </motion.div>
           ))}
-      </div>
+      </motion.div>
     </div>
   );
 };