framer motion library added to _app.js file and

successful in smooth page transitions.

package-lock.json

@@ -11,6 +11,7 @@
         "@next/font": "^13.3.0",
         "animejs": "^3.2.1",
         "autoprefixer": "10.4.14",
+        "framer-motion": "^10.12.4",
         "next": "13.3.0",
         "observer": "^0.0.2",
         "postcss": "8.4.22",
@@ -348,6 +349,21 @@
       "resolved": "https://registry.npmjs.org/@blakeembrey/template/-/template-1.1.0.tgz",
       "integrity": "sha512-iZf+UWfL+DogJVpd/xMQyP6X6McYd6ArdYoPMiv/zlOTzeXXfQbYxBNJJBF6tThvsjLMbA8tLjkCdm9RWMFCCw=="
     },
+    "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",
@@ -4161,6 +4177,29 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.12.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.4.tgz",
+      "integrity": "sha512-9gLtv8T6dui0tujHROR+VM3kdJyKiFCFiD94IQE+0OuX6LaIyXtdVpviokVdrHSb1giWhmmX4yzoucALMx6mtw==",
+      "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/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "@next/font": "^13.3.0",
     "animejs": "^3.2.1",
     "autoprefixer": "10.4.14",
+    "framer-motion": "^10.12.4",
     "next": "13.3.0",
     "observer": "^0.0.2",
     "postcss": "8.4.22",

pages/_app.js

@@ -1,13 +1,28 @@
 import '@/styles/globals.css'
 import { Fira_Code } from '@next/font/google'
+import { AnimatePresence, motion } from "framer-motion";
+import "../styles/globals.css";
 
 const firaCode = Fira_Code ({
   subsets: ["latin"],
 })
-export default function App({ Component, pageProps }) {
+
+function MyApp({ Component, pageProps, router }) {
   return (
+    <AnimatePresence mode='wait'>
+      <motion.div
+        key={router.route}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2 }}
+      >
         <main className={firaCode.className}>
           <Component {...pageProps} />
         </main>
-  )
+      </motion.div>
+    </AnimatePresence>
+  );
 }
+
+export default MyApp;

pages/index.js

@@ -2,6 +2,8 @@
 import React from "react";
 import Navbar from "../Components/Layout/navbar.jsx";
 import Section from "../Components/Layout/section.jsx"
+import { motion } from "framer-motion";
+
 
 export default function Home() {
   return (