feat: add logo and register button animation on scroll

ucsddesignco · Apr 5, 2024 · 4cf7512 · 4cf7512
1 parent b2c815d
commit 4cf7512
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 19 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,7 @@ import FAQ from './pages/FAQ/FAQ';
 import Timeline from './pages/Timeline/Timeline';
 import Judges from './pages/Judges/Judges';
 import { useRef } from 'react';
+import LogoAndRegister from './components/LogoAndRegister/LogoAndRegister';
 
 function Rotate() {
   const scrollContainerRef = useRef<HTMLElement>(null);
@@ -17,6 +18,8 @@ function Rotate() {
   const scroll3Ref = useRef<HTMLElement>(null);
   const scroll4Ref = useRef<HTMLElement>(null);
   const planetRef = useRef<SVGSVGElement>(null);
+  const fakeLogoRef = useRef<HTMLImageElement>(null);
+  const fakeRegisterRef = useRef<HTMLDivElement>(null);
 
   const scrollRefList = [scroll1Ref, scroll2Ref, scroll3Ref, scroll4Ref];
 
@@ -31,7 +34,16 @@ function Rotate() {
         scrollRefList={scrollRefList}
         scrollContainerRef={scrollContainerRef}
       />
-      <Home scroll1Ref={scroll1Ref} />
+      <LogoAndRegister
+        scrollContainerRef={scrollContainerRef}
+        fakeLogoRef={fakeLogoRef}
+        fakeRegisterRef={fakeRegisterRef}
+      />
+      <Home
+        scroll1Ref={scroll1Ref}
+        fakeLogoRef={fakeLogoRef}
+        fakeRegisterRef={fakeRegisterRef}
+      />
       <FAQ scroll2Ref={scroll2Ref} />
       <Timeline scroll3Ref={scroll3Ref} />
       <Judges scroll4Ref={scroll4Ref} />

diff --git a/src/components/LogoAndRegister/LogoAndRegister.scss b/src/components/LogoAndRegister/LogoAndRegister.scss
@@ -0,0 +1,42 @@
+.logo-and-register {
+  @media (max-width: $mobile-breakpoint) {
+    display: none;
+  }
+
+  img {
+    position: fixed;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .register-button {
+    position: fixed;
+    opacity: 0;
+    z-index: 5;
+    .button {
+      background: $primary-orange;
+      display: inline-block;
+      font-size: 1.5em;
+      padding: 0.5em 1.2em;
+      text-decoration: none;
+      color: $primary-white;
+      letter-spacing: 2.4px;
+    }
+
+    .parallelogram {
+      transform: skew(-15deg);
+    }
+
+    .skew-fix {
+      display: inline-block;
+      transform: skew(15deg);
+    }
+
+    @media screen and (max-width: $mobile-breakpoint) {
+      display: block;
+      margin: 0 auto 2rem;
+      width: 100%;
+    }
+  }
+}
diff --git a/src/components/LogoAndRegister/LogoAndRegister.tsx b/src/components/LogoAndRegister/LogoAndRegister.tsx
@@ -0,0 +1,86 @@
+import './LogoAndRegister.scss';
+import { useEffect, useRef } from 'react';
+import Logo from '/Logo.svg';
+
+type LogoAndRegisterProps = {
+  scrollContainerRef: React.RefObject<HTMLElement>;
+  fakeLogoRef: React.RefObject<HTMLImageElement>;
+  fakeRegisterRef: React.RefObject<HTMLDivElement>;
+};
+
+export default function LogoAndRegister({
+  scrollContainerRef,
+  fakeLogoRef,
+  fakeRegisterRef
+}: LogoAndRegisterProps) {
+  const logoRef = useRef<HTMLImageElement>(null);
+  const registerRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const fakeLogoInfo = fakeLogoRef.current?.getBoundingClientRect();
+    const logoInfo = logoRef.current?.getBoundingClientRect();
+    const initialLogoWidth = parseInt(logoInfo!.width);
+    // Change to ref in the future
+    const navigationElement = document.querySelector('nav');
+    const navRightValue = parseInt(
+      window.getComputedStyle(navigationElement).getPropertyValue('right')
+    );
+
+    const fakeRegisterInfo = fakeRegisterRef.current?.getBoundingClientRect();
+    const registerInfo = registerRef.current?.getBoundingClientRect();
+    const initialRegisterWidth = parseInt(registerInfo!.width);
+
+    if (logoRef.current && fakeLogoInfo) {
+      logoRef.current.style.transform = `translate(${fakeLogoInfo.x}px, ${fakeLogoInfo.y - 10}px)`;
+      logoRef.current.style.opacity = '1';
+      setTimeout(() => {
+        (logoRef.current!.style.transition =
+          'transform 0.4s ease-out, scale 0.4s ease-out'),
+          0;
+      });
+    }
+
+    if (registerRef.current && fakeRegisterInfo) {
+      registerRef.current.style.transform = `translate(${fakeRegisterInfo.x}px, ${fakeRegisterInfo.y}px)`;
+      registerRef.current.style.opacity = '1';
+      setTimeout(() => {
+        (registerRef.current!.style.transition = 'transform 0.4s ease-out'), 0;
+      });
+    }
+
+    const lastScrollTop = 0;
+    if (scrollContainerRef.current && logoRef.current) {
+      scrollContainerRef.current.addEventListener('scroll', () => {
+        const st = scrollContainerRef.current!.scrollTop;
+        if (st > lastScrollTop && st > window.innerHeight / 2) {
+          // downscroll code
+          const scaleFactor = 0.5;
+          console.log(window.innerWidth);
+          logoRef.current!.style.transform = `translate(${window.innerWidth - (initialLogoWidth * scaleFactor * 1.5 + navRightValue)}px, 50px) scale(${scaleFactor})`;
+
+          registerRef.current!.style.transform = `translate(${window.innerWidth - (initialRegisterWidth + navRightValue)}px, ${window.innerHeight - (registerInfo!.height + 50)}px)`;
+        } else {
+          // upscroll code
+          logoRef.current!.style.scale = '1';
+          if (fakeLogoInfo) {
+            logoRef.current!.style.transform = `translate(${fakeLogoInfo?.x}px, ${fakeLogoInfo?.y - 10}px)`;
+          }
+          if (fakeRegisterInfo) {
+            registerRef.current!.style.transform = `translate(${fakeRegisterInfo?.x}px, ${fakeRegisterInfo?.y}px)`;
+          }
+        }
+      });
+    }
+  }, [fakeLogoRef, scrollContainerRef, fakeRegisterRef]);
+
+  return (
+    <div className="logo-and-register">
+      <img ref={logoRef} src={Logo} alt="Design Frontiers Logo" />
+      <div className="register-button" ref={registerRef}>
+        <a className="button parallelogram" href="#">
+          <span className="skew-fix">REGISTER NOW</span>
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Home/Home.scss b/src/pages/Home/Home.scss
@@ -60,26 +60,28 @@
     @media (max-width: 550px) {
       width: 100%;
     }
-  }
 
-  .logo {
-    @media screen and (max-width: $mobile-breakpoint) {
-      display: none;
+    .fake-logo {
+      opacity: 0;
+      @media screen and (max-width: $mobile-breakpoint) {
+        display: none;
+      }
     }
-  }
 
-  .mobile-logo {
-    display: none;
+    .mobile-logo {
+      display: none;
 
-    @media screen and (max-width: $mobile-breakpoint) {
-      display: block;
-      margin: 0 auto 1rem;
-      position: relative;
+      @media screen and (max-width: $mobile-breakpoint) {
+        display: block;
+        margin: 0 auto 1rem;
+        position: relative;
+      }
     }
   }
 
   /* REGISTER BUTTON */
   .register-button {
+    opacity: 0;
     .button {
       background: $primary-orange;
       display: inline-block;

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -6,11 +6,15 @@ import { useRef } from 'react';
 
 type HomeProps = {
   scroll1Ref: React.RefObject<HTMLElement>;
+  fakeLogoRef: React.RefObject<HTMLImageElement>;
+  fakeRegisterRef: React.RefObject<HTMLDivElement>;
 };
 
-export default function Home({ scroll1Ref }: HomeProps) {
-  const registerRef = useRef(null);
-  const logoRef = useRef(null);
+export default function Home({
+  scroll1Ref,
+  fakeLogoRef,
+  fakeRegisterRef
+}: HomeProps) {
   const mobileDateRef = useRef(null);
 
   return (
@@ -20,9 +24,9 @@ export default function Home({ scroll1Ref }: HomeProps) {
           <div className="right-container">
             <div className="logo-container">
               <img
-                ref={logoRef}
+                ref={fakeLogoRef}
                 src={Logo}
-                className="logo"
+                className="fake-logo"
                 alt="Design Frontiers Logo"
               />
               <img src={Logo} className="mobile-logo" alt="" />
@@ -45,7 +49,7 @@ export default function Home({ scroll1Ref }: HomeProps) {
                 <h3>DIB ROOM 208</h3>
               </div>
             </div>
-            <div className="register-button" ref={registerRef}>
+            <div className="register-button" ref={fakeRegisterRef}>
               <a className="button parallelogram" href="#">
                 <span className="skew-fix">REGISTER NOW</span>
               </a>

diff --git a/src/pages/Timeline/Timeline.scss b/src/pages/Timeline/Timeline.scss
@@ -71,7 +71,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 50vw;
 
     @media screen and (max-width: $mobile-breakpoint) {
       width: 72vw;