Remove badges page entry animation

app/hooks/useAnimateListEntry.ts

@@ -1,31 +0,0 @@
-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

@@ -14,7 +14,6 @@ import {
 } from "~/utils/urls";
 import { Trans } from "react-i18next";
 import { useTranslation } from "~/hooks/useTranslation";
-import { useAnimateListEntry } from "~/hooks/useAnimateListEntry";
 import { type SendouRouteHandle } from "~/utils/remix";
 
 export const links: LinksFunction = () => {
@@ -42,11 +41,9 @@ export default function BadgesPageLayout() {
   const { t } = useTranslation("badges");
   const data = useLoaderData<BadgesLoaderData>();
 
-  const containerRef = useAnimateListEntry(".badges__nav-link");
-
   return (
     <Main>
-      <div className="badges__container" ref={containerRef}>
+      <div className="badges__container">
         <Outlet />
         <div className="badges__small-badges">
           {data.badges.map((badge) => (

app/styles/badges.css

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