Animate titleHEADmaster

2 files changed, 38 insertions, 1 deletions

diff --git a/client/src/components/LettersPullUp.tsx b/client/src/components/LettersPullUp.tsx
new file mode 100644
index 0000000..0584b5a
--- /dev/null
+++ b/client/src/components/LettersPullUp.tsx
@@ -0,0 +1,36 @@
+import { motion, useInView } from 'framer-motion';
+import * as React from 'react';
+
+export function LettersPullUp({ text }: { text: string }) {
+  const splittedText = text.split('');
+
+  const pullupVariant = {
+    initial: { y: 10, opacity: 0 },
+    animate: (i: number) => ({
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: i * 0.05,
+      },
+    }),
+  };
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once: true });
+  return (
+    <div>
+      {splittedText.map((current, i) => (
+        <motion.div
+          key={i}
+          ref={ref}
+          variants={pullupVariant}
+          initial="initial"
+          animate={isInView ? 'animate' : ''}
+          custom={i}
+          style={{ display: 'inline-block' }}
+        >
+          {current == ' ' ? <span>&nbsp;</span> : current}
+        </motion.div>
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/components/NavBar.tsx b/client/src/components/NavBar.tsx
index 5b22e27..af95d2b 100644
--- a/client/src/components/NavBar.tsx
+++ b/client/src/components/NavBar.tsx
@@ -4,6 +4,7 @@ import { AppBar, Toolbar, Typography } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Desktop from './Desktop';
 import Mobile from './Mobile';
+import { LettersPullUp } from './LettersPullUp';
 
 function NavBar() {
   const isMobile = useMediaQuery('(max-width: 768px)');
@@ -18,7 +19,7 @@ function NavBar() {
           color="inherit"
           sx={{ textDecoration: 'none' }}
         >
-          Madison & Michael
+          <LettersPullUp text="Madison & Michael" />
         </Typography>
         {isMobile ? <Mobile /> : <Desktop />}
       </Toolbar>