Add basic animation

2024-10-13 03:33:40 -04:00
parent ad5ea2a37c
commit 38db18b05b
17 changed files with 216 additions and 27 deletions
--- a/src/components/ui/Timeline.astro
+++ b/src/components/ui/Timeline.astro
@@ -24,7 +24,13 @@ const {
  items && items.length && (
    <div class={containerClass}>
      {items.map(({ title, description, icon, classes: itemClasses = {} }, index = 0) => (
-        <div class={twMerge('flex', panelClass, itemClasses?.panel)}>
+        <div
+          class={twMerge(
+            'flex intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade',
+            panelClass,
+            itemClasses?.panel
+          )}
+        >
          <div class="flex flex-col items-center mr-4 rtl:mr-0 rtl:ml-4">
            <div>
              <div class="flex items-center justify-center">