chore: Installed framer motion

UoaWDCC · Oct 21, 2024 · 6f29a0d · 6f29a0d
1 parent 41dfc92
commit 6f29a0d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/web/package.json b/web/package.json
@@ -19,6 +19,7 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.6.7",
     "embla-carousel-react": "7.1.0",
+    "framer-motion": "^11.11.9",
     "react": "^18.2.0",
     "react-cookies": "^0.1.1",
     "react-dom": "^18.2.0",

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import "@mantine/carousel/styles.css";
+import { AnimatePresence } from "framer-motion";
 import Home from "@pages/Home";
 import About from "@pages/About";
 import Event from "@pages/Event";
@@ -36,10 +37,12 @@ const router = createBrowserRouter([
 export default function App() {
   const [queryClient] = useState(() => new QueryClient());
   return (
-    <MantineProvider>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
-    </MantineProvider>
+    <AnimatePresence>
+      <MantineProvider>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </MantineProvider>
+    </AnimatePresence>
   );
 }
diff --git a/web/src/layouts/Layout.tsx b/web/src/layouts/Layout.tsx
@@ -1,4 +1,5 @@
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from "tailwind-merge";
+import { motion } from "framer-motion";
 
 interface LayoutProps {
   children?: React.ReactNode;
@@ -7,8 +8,18 @@ interface LayoutProps {
 
 export default function Layout({ children, className }: LayoutProps) {
   const mergedClassName = twMerge(
-    'w-screen h-screen flex flex-col justify-center items-center bg-base-100',
+    "w-screen h-screen flex flex-col justify-center items-center bg-base-100",
     className
   );
-  return <div className={mergedClassName}>{children}</div>;
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 15 }}
+      transition={{ delay: 0.15 }}
+      className={mergedClassName}
+    >
+      {children}
+    </motion.div>
+  );
 }
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -2362,6 +2362,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^11.11.9:
+  version "11.11.9"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.11.9.tgz#a60ddf5abbd924812df923068628537a5c6ad8b9"
+  integrity sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==
+  dependencies:
+    tslib "^2.4.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -4379,7 +4386,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@^2.0.0, tslib@^2.1.0:
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
   integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==