diff --git a/package-lock.json b/package-lock.json
index c5e3b26..ce37704 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,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",
@@ -1285,6 +1286,21 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -5551,6 +5567,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.3.tgz",
+      "integrity": "sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 7ac8b33..1cd0b15 100644
--- 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
index 9eda01a..977cd49 100644
--- 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
index 5637c10..dd711f5 100644
--- a/src/components/Home/Hero.tsx
+++ b/src/components/Home/Hero.tsx
@@ -1,19 +1,50 @@
+"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
@@ -21,8 +52,8 @@ export const Hero = () => (
             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
index bdbf389..ef441d0 100644
--- 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>
   );
 };
diff --git a/src/components/Home/Projects/Project.tsx b/src/components/Home/Projects/Project.tsx
index 2cb4f30..39766a1 100644
--- a/src/components/Home/Projects/Project.tsx
+++ b/src/components/Home/Projects/Project.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -7,15 +10,44 @@ interface ProjectsProps {
   project: IProject;
 }
 
+const imageVariants: Variants = {
+  offscreen: {
+    y: 100,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: "spring",
+      bounce: 0.4,
+      duration: 1.8,
+    },
+  },
+};
+
+const textVariants: Variants = {
+  offscreen: { y: 100, opacity: 0 },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: { type: "spring", bounce: 0.1, duration: 0.8 },
+  },
+};
+
 export const Project: React.FC<ProjectsProps> = ({ project }) => {
   const thumbnailImage = project.thumbnailImage;
 
   return (
-    <div className="mb-20 lg:mb-24 last:mb-0 flex relative flex-col">
-      <div className="aspect-w-1 aspect-h-1 bg-gray-100"></div>
-
+    <motion.div
+      className="mb-20 lg:mb-24 last:mb-0 flex flex-col"
+      initial="offscreen"
+      whileInView="onscreen"
+      viewport={{ once: true, amount: 0.7 }}
+      transition={{ staggerChildren: 0.3 }}
+    >
       {project.comingSoon ? (
-        <div className="flex flex-col">
+        <motion.div className="flex flex-col" variants={imageVariants}>
           <div className="relative">
             <div className="tracking-[0.35em] absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 uppercase bg-black text-white text-lg py-3 w-[230px] text-center">
               coming soon
@@ -32,27 +64,36 @@ export const Project: React.FC<ProjectsProps> = ({ project }) => {
           <h3 className="text-3xl font-thin mt-8 text-black">
             {project.title}
           </h3>
-        </div>
+        </motion.div>
       ) : (
-        <Link href={`/projects/${project.slug}`}>
-          {thumbnailImage && (
-            <Image
-              src={thumbnailImage.url || ""}
-              alt={thumbnailImage.description || ""}
-              width={thumbnailImage.details.width}
-              height={thumbnailImage.details.height}
-            />
-          )}
-          <h3 className="text-3xl font-thin cursor-pointer mt-8 text-black">
-            {project.title}
-          </h3>
-        </Link>
+        <motion.div variants={imageVariants}>
+          <Link href={`/projects/${project.slug}`}>
+            {thumbnailImage && (
+              <Image
+                src={thumbnailImage.url || ""}
+                alt={thumbnailImage.description || ""}
+                width={thumbnailImage.details.width}
+                height={thumbnailImage.details.height}
+              />
+            )}
+            <h3 className="text-3xl font-thin cursor-pointer mt-8 text-black">
+              {project.title}
+            </h3>
+          </Link>
+        </motion.div>
       )}
 
-      <span className="text-xl text-[#8C8C8C] mt-1">
+      <motion.span
+        variants={textVariants}
+        className="text-xl text-[#8C8C8C] mt-1"
+      >
         {project.categoryText}
-      </span>
-      {project.intro && <div className="mt-4">{project.intro}</div>}
-    </div>
+      </motion.span>
+      {project.intro && (
+        <motion.div variants={textVariants} className="mt-4">
+          {project.intro}
+        </motion.div>
+      )}
+    </motion.div>
   );
 };
diff --git a/src/components/Home/Projects/ProjectsList.tsx b/src/components/Home/Projects/ProjectsList.tsx
index 2b98b09..d5f35fe 100644
--- a/src/components/Home/Projects/ProjectsList.tsx
+++ b/src/components/Home/Projects/ProjectsList.tsx
@@ -8,8 +8,6 @@ import { Project as IProject } from "@/types/global";
 import { Project } from "./Project";
 import { useProjectsWithFilter } from "./useProjectsWithFilter";
 
-// @TODO Check if it's possible to put a nice transition on appearing/disappearing items
-
 interface ProjectsListProps {
   projects: Array<
     Pick<
diff --git a/src/components/Home/Skills/index.tsx b/src/components/Home/Skills/index.tsx
index 1092a79..35667a5 100644
--- a/src/components/Home/Skills/index.tsx
+++ b/src/components/Home/Skills/index.tsx
@@ -1,37 +1,94 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+
 import { CirclesLogo } from "@/icons/CirclesLogo";
 
 import { SKILLS, SOFTWARES } from "./skills";
 
+const variants: Variants = {
+  offscreen: {
+    y: 100,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: "spring",
+      bounce: 0.4,
+      duration: 1,
+    },
+  },
+};
+
 export const Skills = () => (
   <div className="bg-[#FFB649] flex flex-col px-8 md:px-16 lg:px-32 xl:px-60 py-12 lg:py-24 relative">
     <div className="flex items-center justify-between overflow-hidden">
-      <div className="flex flex-col">
-        <h1 className="font-semibold text-5xl">Expertise</h1>
+      <motion.div
+        initial="offscreen"
+        whileInView="onscreen"
+        viewport={{ once: true, amount: 0.7 }}
+        className="flex flex-col"
+      >
+        <motion.h1 variants={variants} className="font-semibold text-5xl">
+          Expertise
+        </motion.h1>
 
         <div className="mt-8 w-screen overflow-x-scroll lg:w-auto">
           <div className="flex">
-            <div className="flex flex-col">
-              <span className="tracking-wider font-thin">SOFTWARE</span>
+            <motion.div
+              className="flex flex-col"
+              initial="offscreen"
+              whileInView="onscreen"
+              viewport={{ once: true, amount: 0.8 }}
+              transition={{ staggerChildren: 0.1 }}
+            >
+              <motion.span
+                className="tracking-wider font-thin"
+                variants={variants}
+              >
+                SOFTWARE
+              </motion.span>
 
               {SOFTWARES.map((software, i) => (
-                <span key={i} className="mt-2 text-sm md:text-base">
+                <motion.span
+                  key={i}
+                  className="mt-2 text-sm md:text-base"
+                  variants={variants}
+                >
                   {software}
-                </span>
+                </motion.span>
               ))}
-            </div>
+            </motion.div>
 
-            <div className="flex flex-col ml-12 md:ml-20">
-              <span className="tracking-wider font-thin">SKILLS</span>
+            <motion.div
+              className="flex flex-col ml-12 md:ml-20"
+              initial="offscreen"
+              whileInView="onscreen"
+              viewport={{ once: true, amount: 0.8 }}
+              transition={{ staggerChildren: 0.1 }}
+            >
+              <motion.span
+                className="tracking-wider font-thin"
+                variants={variants}
+              >
+                SKILLS
+              </motion.span>
 
               {SKILLS.map((skill, i) => (
-                <span key={i} className="mt-2 text-sm md:text-base">
+                <motion.span
+                  key={i}
+                  className="mt-2 text-sm md:text-base"
+                  variants={variants}
+                >
                   {skill}
-                </span>
+                </motion.span>
               ))}
-            </div>
+            </motion.div>
           </div>
         </div>
-      </div>
+      </motion.div>
 
       <div className="hidden xl:block">
         <CirclesLogo />
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 88c4ecc..9096708 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -4,7 +4,7 @@ import { CONTRA_LINK } from "@/utils/constants";
 
 export const Navbar: React.FC = () => {
   return (
-    <div className="w-screen flex bg-transparent justify-between items-center py-8 px-8 md:px-16 lg:px-32 xl:px-60 z-50">
+    <div className="w-screen flex bg-transparent justify-between items-center py-8 px-8 md:px-16 lg:px-32 xl:px-48 z-50">
       <div className="flex items-center">
         <Link href="/">
           <span className="text-black text-2xl lg:text-4xl font-bodoni">
diff --git a/src/components/Project/Navbar/index.tsx b/src/components/Project/Navbar/index.tsx
index e526902..695fae9 100644
--- a/src/components/Project/Navbar/index.tsx
+++ b/src/components/Project/Navbar/index.tsx
@@ -4,7 +4,7 @@ import { CONTRA_LINK } from "@/utils/constants";
 
 export const ProjectNavbar: React.FC = ({}) => {
   return (
-    <div className="w-screen h-16 lg:h-32 flex justify-between items-center px-6 md:px-16 lg:px-24 z-50">
+    <div className="w-screen flex justify-between items-center py-8 px-8 md:px-16 lg:px-32 xl:px-48 z-50">
       <div className="flex items-center">
         <Link href="/">
           <span className="text-black text-xl lg:text-4xl font-bodoni">