feat: Added basic animations on page transitions

package.json

@@ -21,6 +21,7 @@
  "@types/react-dom": "18.0.9",
  "eslint": "8.28.0",
  "eslint-config-next": "13.0.6",
+ "framer-motion": "^8.2.4",
  "groq": "^2.33.2",
  "next": "13.0.6",
  "react": "18.2.0",

src/components/Card.tsx

@@ -20,7 +20,7 @@ export default function Card({image, title, description, tags, link}: Props) {
  return (
  <Container
  href={link ?? ''}
- className={`flex flex-col group p-4 rounded-lg border-1 border-black dark:border-dark-white ${
+ className={`flex flex-1 flex-col group p-4 rounded-lg border-1 border-black dark:border-white/10 ${
  isComingSoon
  ? ''
  : 'duration-200 [@media(hover:hover)]:dark:hover:border-white'
@@ -58,7 +58,7 @@ export default function Card({image, title, description, tags, link}: Props) {
  ))}
  </div>
  {!isComingSoon ? (
- <div className="h-16 w-16 min-w-16 flex items-center text-center rounded-full border-1 border-black dark:border-dark-white [@media(hover:hover)]:group-hover:bg-black [@media(hover:hover)]:dark:group-hover:bg-white text-black dark:text-white [@media(hover:hover)]:group-hover:text-white [@media(hover:hover)]:dark:group-hover:text-black">
+ <div className="h-16 w-16 min-w-16 flex items-center text-center rounded-full border-1 border-black dark:border-white/10 [@media(hover:hover)]:group-hover:bg-black [@media(hover:hover)]:dark:group-hover:bg-white text-black dark:text-white [@media(hover:hover)]:group-hover:text-white [@media(hover:hover)]:dark:group-hover:text-black">
  <p className="text-4-1/2xl w-full [@media(hover:hover)]:group-hover:-rotate-45 duration-200 transition-transform ease-linear">
  →
  </p>

src/components/Header.tsx

@@ -50,7 +50,7 @@ export default function Header() {
 
  return (
  <header
- className={`flex items-center justify-between py-4 px-10 border-b-1 border-black dark:border-dark-white bg-white dark:bg-black sticky transition-top duration-500 z-10 ${visibleClass}`}
+ className={`flex items-center justify-between py-4 px-10 border-b-1 border-black dark:border-white/10 bg-white dark:bg-black sticky transition-top duration-500 z-10 ${visibleClass}`}
  >
  <div className="flex items-center justify-between w-full max-w-3xl mx-auto">
  <Link

src/components/Layout.tsx

@@ -1,4 +1,5 @@
 import {useQuery} from '@tanstack/react-query';
+import {motion} from 'framer-motion';
 import Image, {ImageProps} from 'next/image';
 import Link from 'next/link';
 import * as React from 'react';
@@ -64,7 +65,13 @@ export default function Layout({
  </div>
  ) : null}
 
- <main className="mb-auto">
+ <motion.main
+ initial={{y: 50, opacity: 0}}
+ animate={{y: 0, opacity: 1}}
+ exit={{y: 50, opacity: 0}}
+ transition={{duration: 0.5}}
+ className="mb-auto"
+ >
  {props.type === 'page' ? (
  <div className="mt-20 md:mt-40 px-6 md:px-20 max-w-screen-2xl mx-auto">
  <h1 className="text-4-1/2xl md:text-6-1/2xl text-black dark:text-white font-bold md:whitespace-pre-line">
@@ -105,9 +112,9 @@ export default function Layout({
  )}
 
  {includeCarousel ? <Carousel /> : null}
- </main>
+ </motion.main>
 
- <footer className="mt-20 md:mt-40 border-t-1 border-black dark:border-dark-white">
+ <footer className="mt-20 md:mt-40 border-t-1 border-black dark:border-white/10">
  <div className="p-10 max-w-3xl mx-auto">
  <div className="md:flex items-center justify-between mb-8">
  <Link

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import localFont from '@next/font/local';
 import {Hydrate, QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
+import {AnimatePresence} from 'framer-motion';
 import type {AppProps} from 'next/app';
 import * as React from 'react';
 import ThemeProvider from '~/context/theme';
@@ -36,14 +37,21 @@ export default function App({Component, pageProps}: AppProps) {
  })
  );
 
+ React.useEffect(() => {
+ if (typeof window === 'undefined') return;
+ window.scrollTo({top: 0});
+ }, []);
+
  return (
  <div
  className={`flex flex-col h-max min-h-full bg-white dark:bg-black transition-colors duration-500 ${SctoGroteskFont.className}`}
  >
  <ThemeProvider>
  <QueryClientProvider client={queryClient}>
  <Hydrate state={pageProps.dehydratedState}>
- <Component {...pageProps} />
+ <AnimatePresence mode="wait">
+ <Component {...pageProps} />
+ </AnimatePresence>
  </Hydrate>
  <ReactQueryDevtools />
  </QueryClientProvider>