Animate badges page entrance

app/hooks/useAnimateListEntry.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { spring } from "react-flip-toolkit";
+
+export function useAnimateListEntry(className: string) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const squares = [
+      ...containerRef.current!.querySelectorAll(className),
+    ] as HTMLElement[];
+    squares.forEach((el, i) => {
+      spring({
+        config: "wobbly",
+        values: {
+          translateY: [-10, 0],
+          opacity: [0, 1],
+        },
+        onUpdate: (value) => {
+          const { translateY, opacity } = value as {
+            translateY: number;
+            opacity: number;
+          };
+          el.style.opacity = String(opacity);
+          el.style.transform = `translateY(${translateY}px)`;
+        },
+        delay: i * 25,
+      });
+    });
+  }, [className]);
+
+  return containerRef;
+}

app/routes/badges.tsx

@@ -8,6 +8,7 @@ import type { All } from "~/db/models/badges.server";
 import styles from "~/styles/badges.css";
 import { BORZOIC_TWITTER, FAQ_PAGE } from "~/utils/urls";
 import { Trans, useTranslation } from "react-i18next";
+import { useAnimateListEntry } from "~/hooks/useAnimateListEntry";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -29,9 +30,11 @@ export default function BadgesPageLayout() {
   const { t } = useTranslation("badges");
   const data = useLoaderData<BadgesLoaderData>();
 
+  const containerRef = useAnimateListEntry(".badges__nav-link");
+
   return (
     <Main>
-      <div className="badges__container">
+      <div className="badges__container" ref={containerRef}>
         <Outlet />
         <div className="badges__small-badges">
           {data.badges.map((badge) => (

app/styles/badges.css

@@ -17,6 +17,10 @@
   gap: var(--s-2);
 }
 
+.badges__nav-link {
+  opacity: 0;
+}
+
 .badges__nav-link.active {
   display: none;
 }