fix: onload animation tweaks

src/components/GlobalStyles.astro

@@ -52,6 +52,8 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
   --banner-height-home 60vh
   --banner-height 40vh
 
+  --content-delay 150ms
+
 color_set({
   --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
   --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
@@ -257,20 +259,20 @@ color_set({
 }
 .onload-animation {
     opacity: 0;
-    animation: 500ms fade-in-up;
+    animation: 300ms fade-in-up;
     animation-fill-mode: forwards;
 }
 #top-row {
     animation-delay: 0ms
 }
 #sidebar {
-    animation-delay: 150ms
+    animation-delay: 100ms
 }
 #content-wrapper {
-    animation-delay: 350ms;
+    animation-delay: var(--content-delay);
 }
 #footer {
-    animation-delay: 500ms;
+    animation-delay: 400ms;
 }
 
 

src/components/PostCard.astro

@@ -19,8 +19,9 @@ interface Props {
     description: string;
     words: number;
     draft: boolean;
+    style: string;
 }
-const { entry, title, url, published, tags, category, image, description, words } = Astro.props;
+const { entry, title, url, published, tags, category, image, description, words, style } = Astro.props;
 const className = Astro.props.class;
 
 const hasCover = image !== undefined && image !== null && image !== '';
@@ -30,7 +31,7 @@ const coverWidth = "28%";
 const { remarkPluginFrontmatter } = await entry.render();
 
 ---
-<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
+<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
     <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
         <a href={url}
            class="transition w-full block font-bold mb-3 text-3xl text-90

src/components/PostPage.astro

@@ -3,6 +3,9 @@ import {getPostUrlBySlug} from "@utils/url-utils";
 import PostCard from "./PostCard.astro";
 
 const {page} = Astro.props;
+
+let delay = 0
+const interval = 50
 ---
 <div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
     {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => {
@@ -17,6 +20,8 @@ const {page} = Astro.props;
                     image={entry.data.image}
                     description={entry.data.description}
                     draft={entry.data.draft}
+                    class:list="onload-animation"
+                    style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
             ></PostCard>
         );
     })}

src/components/control/Pagination.astro

@@ -4,9 +4,10 @@ import { Icon } from 'astro-icon/components';
 interface Props {
     page: Page;
     class?: string;
+    style?: string;
 }
 
-const {page} = Astro.props;
+const {page, style} = Astro.props;
 
 const HIDDEN = -1;
 
@@ -59,7 +60,7 @@ const getPageUrl = (p: number) => {
 
 ---
 
-<div class:list={[className, "flex flex-row gap-3 justify-center"]}>
+<div class:list={[className, "flex flex-row gap-3 justify-center"]} style={style}>
     <a href={page.url.prev} aria-label={page.url.prev ? "Previous Page" : null}
        class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
            {"disabled": page.url.prev == undefined}

src/components/widget/Categories.astro

@@ -15,12 +15,17 @@ const COLLAPSE_THRESHOLD = 5;
 const isCollapsed = categories.length >= COLLAPSE_THRESHOLD;
 
 interface Props {
-    categories: Category[];
+    class?: string;
+    style?: string;
 }
+const className = Astro.props.class
+const style = Astro.props.style
 
 ---
 
-<WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}>
+<WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}
+                class={className} style={style}
+>
     {categories.map((c) =>
         <ButtonLink
             url={getCategoryUrl(c.name)}

src/components/widget/SideBar.astro

@@ -10,7 +10,7 @@ const className = Astro.props.class;
         <Profile></Profile>
     </div>
     <div class="flex flex-col w-full gap-4 top-4 sticky top-4">
-        <Categories></Categories>
-        <Tag></Tag>
+        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
+        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
     </div>
 </div>

src/components/widget/Tags.astro

@@ -12,8 +12,15 @@ const COLLAPSED_HEIGHT = "7.5rem";
 
 const isCollapsed = tags.length >= 20;
 
+interface Props {
+    class?: string;
+    style?: string;
+}
+const className = Astro.props.class
+const style = Astro.props.style
+
 ---
-<WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}>
+<WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
     <div class="flex gap-2 flex-wrap">
         {tags.map(t => (
             <ButtonTag href={`/archive/tag/${t.name}`} label={`View all posts with the ${t.name} tag`}>

src/components/widget/WidgetLayout.astro

@@ -7,6 +7,8 @@ interface Props {
     name?: string;
     isCollapsed?: boolean;
     collapsedHeight?: string;
+    class?: string;
+    style?: string;
 }
 const props = Astro.props;
 const {
@@ -14,10 +16,12 @@ const {
     name,
     isCollapsed,
     collapsedHeight,
+    style,
 } = Astro.props
+const className = Astro.props.class
 
 ---
-<widget-layout data-id={id} data-is-collapsed={isCollapsed} class="pb-4 card-base">
+<widget-layout data-id={id} data-is-collapsed={isCollapsed} class={"pb-4 card-base " + className} style={style}>
     <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
         before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
         before:absolute before:left-[-16px] before:top-[5.5px]">{name}</div>

src/layouts/Layout.astro

@@ -287,6 +287,10 @@ const setup = () => {
 		}
 	})
 */
+	// Remove the delay for the first time page load
+	window.swup.hooks.on('link:click', () => {
+		document.documentElement.style.setProperty('--content-delay', '0ms')
+	})
 }
 if (window.swup.hooks) {
 	setup()

src/pages/[...page].astro

@@ -14,9 +14,11 @@ export async function getStaticPaths({ paginate }) {
 
 const {page} = Astro.props;
 
+const len = page.data.length;
+
 ---
 
 <MainGridLayout>
     <PostPage page={page}></PostPage>
-    <Pagination class="mx-auto" page={page}></Pagination>
+    <Pagination class="mx-auto onload-animation" page={page} style=`animation-delay: calc(var(--content-delay) + ${(len)*50}ms)`></Pagination>
 </MainGridLayout>

src/pages/posts/[...slug].astro

@@ -112,10 +112,10 @@ const { remarkPluginFrontmatter } = await entry.render();
 </MainGridLayout>
 
 <style is:global>
-#post-container :nth-child(1) { animation-delay: 0ms }
-#post-container :nth-child(2) { animation-delay: 75ms }
-#post-container :nth-child(3) { animation-delay: 150ms }
-#post-container :nth-child(4) { animation-delay: 300ms }
-#post-container :nth-child(5) { animation-delay: 450ms }
-#post-container :nth-child(6) { animation-delay: 600ms }
+#post-container :nth-child(1) { animation-delay: calc(var(--content-delay) + 0ms) }
+#post-container :nth-child(2) { animation-delay: calc(var(--content-delay) + 50ms) }
+#post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) }
+#post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) }
+#post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
+#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) }
 </style>