Add the mascot with scroll animations.

diffplug · Sep 29, 2023 · 37c75ad · 37c75ad
1 parent 8c49abc
commit 37c75ad
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 32 deletions.
diff --git a/docs/public/mascot.webp b/docs/public/mascot.webp
diff --git a/docs/src/components/Hero.tsx b/docs/src/components/Hero.tsx
@@ -1,46 +1,50 @@
 import clsx from "clsx";
 import { ButtonList } from "./ButtonList";
 import { Logo } from "./Logo";
+import { Mascot } from "./Mascot";
 
 export function Hero() {
   return (
-    <div
-      className={clsx([
-        "flex",
-        "justify-between",
-        "px-2",
-        "wide-phone:block",
-        "wide-phone:px-4",
-        "wide-phone:py-2",
-        "wide-phone:text-right",
-      ])}
-    >
-      <Logo />
+    <>
+      <Mascot />
       <div
         className={clsx([
           "flex",
-          "flex-col",
           "justify-between",
-          "pt-1",
-          "wide-phone:p-0",
-          "wide-phone:justify-center",
-          "wide-phone:items-end",
+          "px-2",
+          "wide-phone:block",
+          "wide-phone:px-4",
+          "wide-phone:py-2",
+          "wide-phone:text-right",
         ])}
       >
-        <p
+        <Logo />
+        <div
           className={clsx([
-            "font-sans",
-            "text-[22px]",
-            "wide-phone:text-[30px]",
-            "wide-phone:mb-2",
-            "tablet:text-[40px]",
-            "desktop:text-[60px]",
+            "flex",
+            "flex-col",
+            "justify-between",
+            "pt-1",
+            "wide-phone:p-0",
+            "wide-phone:justify-center",
+            "wide-phone:items-end",
           ])}
         >
-          snapshot testing for
-        </p>
-        <ButtonList />
+          <p
+            className={clsx([
+              "font-sans",
+              "text-[22px]",
+              "wide-phone:text-[30px]",
+              "wide-phone:mb-2",
+              "tablet:text-[40px]",
+              "desktop:text-[60px]",
+            ])}
+          >
+            snapshot testing for
+          </p>
+          <ButtonList />
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/docs/src/components/Mascot.tsx b/docs/src/components/Mascot.tsx
@@ -0,0 +1,63 @@
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+
+export function Mascot() {
+  const literalOffsetTop = useRef(0);
+
+  useEffect(() => {
+    const literalSection = document.getElementById("selfie-is-literal")!;
+    literalOffsetTop.current = literalSection.offsetTop;
+
+    function setScrollPosition() {
+      // 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);
+
+      // 0 at the top of the page, 1 when the literal section comes into view. Don't exceed 1.
+      console.log(literalOffsetTop.current);
+      document.body.style.setProperty(
+        "--literal-scroll",
+        "" + Math.min(window.scrollY / literalOffsetTop.current, 1)
+      );
+    }
+
+    function setViewportVariables() {
+      document.body.style.setProperty(
+        "--innerHeight",
+        "-" + window.innerHeight + "px"
+      );
+      literalOffsetTop.current = literalSection.offsetTop;
+    }
+
+    setViewportVariables();
+
+    window.addEventListener("scroll", setScrollPosition, false);
+    window.addEventListener("resize", setViewportVariables, false);
+    return () => {
+      window.removeEventListener("scroll", setScrollPosition);
+      window.removeEventListener("resize", setViewportVariables);
+    };
+  }, []);
+
+  return (
+    <img
+      src="/mascot.webp"
+      alt="Selfie mascot"
+      className={clsx([
+        "h-[1745px]",
+        "fixed",
+        "top-[80px]",
+        "left-[20px]",
+        "object-cover",
+        "object-center",
+        "block",
+        "overflow-visible",
+        "animate-slide-and-fade",
+        "block",
+        "z-[-1]",
+        "opacity-100",
+      ])}
+    />
+  );
+}
diff --git a/docs/src/pages/_document.tsx b/docs/src/pages/_document.tsx
@@ -11,10 +11,12 @@ export default function Document() {
           rel="stylesheet"
         />
       </Head>
-      <body className="flex justify-center">
-        <div className="w-full max-w-[1300px]">
-          <Main />
-          <NextScript />
+      <body>
+        <div className="flex justify-center">
+          <div className="w-full max-w-[1300px] overflow-hidden">
+            <Main />
+            <NextScript />
+          </div>
         </div>
       </body>
     </Html>

diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -14,6 +14,26 @@ module.exports = {
         "logo-tablet": "5px 5px 2px #000",
         "logo-desktop": "5px 5px 2px #000",
       },
+      animation: {
+        "slide-and-fade":
+          "slide 1s linear calc(var(--page-scroll) * -0.9s) paused," +
+          "customFade 1s linear calc(var(--literal-scroll) * -0.9s) paused",
+      },
+      keyframes: {
+        slide: {
+          to: {
+            transform: "translateY(var(--innerHeight))",
+          },
+        },
+        customFade: {
+          from: {
+            opacity: 1,
+          },
+          to: {
+            opacity: 0.2,
+          },
+        },
+      },
     },
     fontFamily: {
       sans: "'Jost', sans-serif",