Merge pull request #2612 from input-output-hk/filip/feat/docs-homepage-rewrite-scroll-animations

filip(fix): rewrite scroll-based animation with pure css/js to exclude framer

Author: jpraynaud

docs/website/helpers/media-queries.ts

@@ -8,4 +8,6 @@ export const forLaptop = "(min-width: 1024px)";
 
 export const forDesktop = "(min-width: 1280px)";
 
+export const forLargeScreen = "(min-width: 1550px)";
+
 export const forTabletOnly = `${forTablet} and (max-width: 1024px)`;

docs/website/src/components/WhyMithril.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef } from "react";
+import Link from "@docusaurus/Link";
+import { WhyMithrilContents } from "../../homepage-content/why-mithril";
+import { cx } from "cva";
+import useMediaQuery from "../hooks/useMediaQuery";
+import { forLargeScreen } from "../../helpers/media-queries";
+
+const WhyMithril = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const isLargeScreen = useMediaQuery(forLargeScreen);
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const animate = () => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      const scrollY = window.scrollY;
+      const viewportHeight = window.innerHeight;
+
+      const containerTop = container.offsetTop;
+      const containerHeight = container.offsetHeight;
+      const scrollProgress =
+        (scrollY + viewportHeight - containerTop) /
+        (containerHeight + viewportHeight);
+
+      itemRefs.current.forEach((el, index) => {
+        if (!el) return;
+
+        const start = 0.07 + index * 0.08;
+        const end = start + 0.75;
+
+        let localProgress = (scrollProgress - start) / (end - start);
+        localProgress = Math.min(Math.max(localProgress, 0), 1);
+
+        const translateZ = -200 + localProgress * 400;
+        const opacity =
+          localProgress < 0.5 ? localProgress * 2 : (1 - localProgress) * 2;
+        const blur =
+          localProgress < 0.5
+            ? 5 - localProgress * 10
+            : (1 - localProgress) * 100;
+
+        el.style.opacity = `${opacity}`;
+        el.style.transform = `translateZ(${translateZ}px)`;
+        el.style.filter = `blur(${blur}px)`;
+      });
+
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    animationFrameId = requestAnimationFrame(animate);
+
+    return () => cancelAnimationFrame(animationFrameId);
+  }, []);
+
+  return (
+    <section className="component bg-blue-light">
+      <div className="pageContainer">
+        <h5 className="text-base text-black pb-12">
+          {WhyMithrilContents.title}
+        </h5>
+
+        <div className="flex tablet:flex-row flex-col justify-between gap-[1.625rem] text-primary">
+          <div
+            className="text-3xl text-center flex justify-center text-blue items-center basis-1/2 stuck-grid flex-col gap-4"
+            ref={containerRef}
+          >
+            {WhyMithrilContents.timeline.map((item, index) => (
+              <div
+                key={index}
+                ref={(el) => (itemRefs.current[index] = el)}
+                className={cx(
+                  "timeline-grid-item",
+                  item === "Basho" && "text-blue-highlight",
+                )}
+                style={{
+                  transformStyle: "preserve-3d",
+                  opacity: 0,
+                  filter: "blur(5px)",
+                  transform: "translateZ(-200px)",
+                  alignSelf: [
+                    "flex-start",
+                    "flex-end",
+                    "flex-start",
+                    "center",
+                    "flex-end",
+                  ][index % 5],
+                }}
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+
+          <div className="flex flex-col basis-1/2 gap-10 fade-in delay">
+            {WhyMithrilContents.descriptionParagraph.message}
+            <Link
+              className="inline-block px-4 py-3 font-bold text-sm text-white rounded-lg border-[0.5px] border-gray-border no-underline bg-secondary hover:bg-blue-extralight hover:no-underline hover:text-primary hover:scale-105 transition-all w-fit hover:text-white"
+              to="/mithril/beginner/why-use-mithril"
+            >
+              Learn more
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WhyMithril;

docs/website/src/components/why-mithril/AnimatedTimelineItem.tsx

@@ -302,3 +302,21 @@ a.menu__link {
   perspective: 500px;
   transform-style: preserve-3d;
 }
+
+.timeline-grid-item {
+  will-change: transform, opacity, filter;
+  transition:
+    opacity 0.1s ease,
+    transform 0.1s ease,
+    filter 0.1s ease;
+}
+
+.landing-navbar--top {
+  background-color: rgba(255, 255, 255, 0);
+  transition: background-color 0.3s ease;
+}
+
+.landing-navbar--scrolled {
+  background-color: rgba(255, 255, 255, 0.96);
+  transition: background-color 0.3s ease;
+}

docs/website/src/components/why-mithril/WhyMithril.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { PageContext, PageType } from "../context/PageContext";
 import HomepageHero from "../components/HomepageHero";
 import Features from "../components/Features";
-import WhyMithril from "../components/why-mithril/WhyMithril";
 import AnimatedText from "../components/AnimatedText";
 import UseCases from "../components/UseCases";
+import WhyMithril from "../components/WhyMithril";
 
 export default function HomePage() {
   return (

docs/website/src/css/custom.css

@@ -8,8 +8,6 @@ import {
 import { translate } from "@docusaurus/Translate";
 import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar";
 import styles from "./styles.module.css";
-
-import { useScroll, motion, useTransform, MotionValue } from "framer-motion";
 import { useIsLandingPage } from "../../../hooks/useIsLandingPage";
 
 function NavbarBackdrop(props) {
@@ -21,6 +19,7 @@ function NavbarBackdrop(props) {
     />
   );
 }
+
 export default function NavbarLayout({ children }) {
   const isLandingPage = useIsLandingPage();
   const {
@@ -29,26 +28,19 @@ export default function NavbarLayout({ children }) {
   const mobileSidebar = useNavbarMobileSidebar();
   const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
 
-  const { scrollY } = useScroll();
-  const y = useTransform(
-    scrollY,
-    [0, 70],
-    ["rgba(255, 255, 255, 0)", "rgba(255, 255, 255, 0.96)"],
-  );
+  const [scrolled, setScrolled] = useState(false);
 
-  const [isMounted, setIsMounted] = useState(false);
   useEffect(() => {
-    setIsMounted(true);
+    const onScroll = () => {
+      setScrolled(window.scrollY > 70);
+    };
+
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
   }, []);
+
   return (
-    <motion.header
-      //@ts-ignore
-      style={
-        isLandingPage &&
-        isMounted && {
-          backgroundColor: y,
-        }
-      }
+    <header
       ref={navbarRef}
       aria-label={translate({
         id: "theme.NavBar.navAriaLabel",
@@ -61,12 +53,11 @@ export default function NavbarLayout({ children }) {
           ? "border-none pt-3"
           : "border-b border-[#EAEAEB] pt-3 pb-4 tablet:px-2",
         "navbar--fixed-top",
-        hideOnScroll && [
-          // styles.navbarHideable,
-          !isNavbarVisible && styles.navbarHidden,
-        ],
+        hideOnScroll && !isNavbarVisible && styles.navbarHidden,
         {
           "navbar-sidebar--show": mobileSidebar.shown,
+          "landing-navbar--scrolled": isLandingPage && scrolled,
+          "landing-navbar--top": isLandingPage && !scrolled,
         },
       )}
     >
@@ -79,6 +70,6 @@ export default function NavbarLayout({ children }) {
       </div>
       <NavbarBackdrop onClick={mobileSidebar.toggle} />
       <NavbarMobileSidebar />
-    </motion.header>
+    </header>
   );
 }