Fix mascot animations (#36)

diffplug · Oct 6, 2023 · 207c193 · 207c193
2 parents feed15e + 493df55
commit 207c193
Showing 1 changed file with 48 additions and 18 deletions.
diff --git a/docs/src/components/Mascot.tsx b/docs/src/components/Mascot.tsx
@@ -1,36 +1,56 @@
 import clsx from "clsx";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export function Mascot() {
   const literalOffsetTop = useRef(0);
+  const mascotRef = useRef<HTMLDivElement | null>(null);
+  let [spacerWidth, setSpacerWidth] = useState(0);
 
   useEffect(() => {
-    const literalSection = document.getElementById("literal")!;
+    let literalSection = document.getElementById("literal")!;
     literalOffsetTop.current = literalSection.offsetTop;
 
-    if (window.scrollY > 1000) {
+    if (window.scrollY > 10) {
       setScrollPositionVariables();
     }
 
     function setScrollPositionVariables() {
+      /**
+       * Pressing the back button on the home page triggers
+       * this event for some reason I can't figure out. The
+       * ref is unmounted, so just don't run the event.
+       */
+      if (!mascotRef.current!) return;
+
       // 0 at the stop of the page, 1 at the bottom of the page
       const pageScrollOffset =
         window.scrollY / (document.body.offsetHeight - window.innerHeight);
-      document.body.style.setProperty("--page-scroll", "" + pageScrollOffset);
+      mascotRef.current!.style.setProperty(
+        "--page-scroll",
+        "" + pageScrollOffset
+      );
+
+      if (!literalOffsetTop.current) {
+        // ref gets removed when routing client-side. Get it back.
+        literalSection = document.getElementById("literal")!;
+        literalOffsetTop.current = literalSection.offsetTop;
+      }
 
       // 0 at the top of the page, 1 when the literal section comes into view. Don't exceed 1.
-      document.body.style.setProperty(
+      mascotRef.current!.style.setProperty(
         "--literal-scroll",
         "" + Math.min(window.scrollY / literalOffsetTop.current, 1)
       );
     }
 
     function setViewportVariables() {
-      document.body.style.setProperty(
+      mascotRef.current!.style.setProperty(
         "--innerHeight",
         "-" + window.innerHeight + "px"
       );
       literalOffsetTop.current = literalSection.offsetTop;
+
+      setSpacerWidth(Math.max((window.innerWidth - 1300) / 2, 0));
     }
 
     setViewportVariables();
@@ -44,29 +64,39 @@ export function Mascot() {
   }, []);
 
   return (
-    <img
-      src="/mascot.webp"
-      alt="Selfie mascot"
+    <div
+      ref={mascotRef}
       className={clsx([
-        "max-w-[830px]",
-        "h-[1745px]",
         "fixed",
         "top-[80px]",
         "left-[-200px]",
-        "object-cover",
-        "object-left",
         "animate-slide-and-fade",
         "block",
         "z-[-1]",
         "opacity-100",
         "wide-phone:top-[145px]",
         "tablet:top-[30px]",
-        "desktop:max-w-[1245px]",
-        "desktop:h-[2616px]",
         "desktop:left-[-250px]",
-        "xl:absolute",
-        "xl:left-[-250px]",
+        "flex",
+        "flex-start",
       ])}
-    />
+    >
+      <div
+        className={clsx(["h-1"])}
+        style={{ width: spacerWidth + "px" }}
+      ></div>
+      <img
+        src="/mascot.webp"
+        alt="Selfie mascot"
+        className={clsx([
+          "max-w-[830px]",
+          "h-[1745px]",
+          "object-cover",
+          "object-left",
+          "desktop:max-w-[1245px]",
+          "desktop:h-[2616px]",
+        ])}
+      />
+    </div>
   );
 }