diff --git a/src/components/AnimateEntry.tsx b/src/components/AnimateEntry.tsx index bbcce2b..2dd9b71 100644 --- a/src/components/AnimateEntry.tsx +++ b/src/components/AnimateEntry.tsx @@ -1,6 +1,25 @@ import React, { forwardRef } from "react"; import { css, cx } from "@emotion/css"; +const animationStyle = css` + & > * { + animation: slideIn 300ms backwards; + } + + @keyframes slideIn { + from { + opacity: 0; + translate: 0 3rem; + } + to { + opacity: 1; + translate: 0 0; + } + } +`; + +const delayArray = Array.from({ length: 20 }, (_, i) => i); + export interface AnimateEntryProps extends React.HTMLAttributes { as?: React.ElementType; delay?: number; @@ -14,34 +33,17 @@ export const AnimateEntry = forwardRef( return ( * { - animation: slideIn 300ms backwards; - } - - ${React.Children.map( - children, - (child, i) => - child && - css` - & > *:nth-child(${i + 1}) { - animation-delay: ${i * delay}ms; - } - `, - )} - - @keyframes slideIn { - from { - opacity: 0; - translate: 0 3rem; - } - to { - opacity: 1; - translate: 0 0; - } - } - `, + "animate-entry", + animationStyle, className, + delayArray.map( + i => + css` + & > *:nth-child(${i + 1}) { + animation-delay: ${i * delay}ms; + } + `, + ), )} {...props} ref={ref}> diff --git a/src/components/Container.tsx b/src/components/Container.tsx index aaf0b2d..6549038 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -4,7 +4,7 @@ import useLocation from "wouter/use-location"; import { ReactComponent as Logo } from "../assets/logo.svg"; import { ReactComponent as Right } from "../assets/arrow-right.svg"; -import { get, getTimeout } from "../util"; +import { getTimeout } from "../util"; import Menu, { MenuEntries, MenuPaths } from "./Menu"; import useMediaQuery from "../util/useMediaQuery"; import { AnimateEntry } from "./AnimateEntry"; @@ -281,6 +281,7 @@ const Container: React.FC<{ (xs: X[], i: number) { - return xs.at((i + 1) % xs.length)!; - }, - prev(xs: X[], i: number) { - return xs.at((i - 1) % xs.length)!; - }, -}; - // required css is inlined in index.html export function setupCursorTracking(el: HTMLElement | null) { if (!el) return;