Easen up scrolling animations

Author: josevalim

src/components/ui/Reveal.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from "@/utilities/classname";
 
-// Markup contract; paint/IO in scripts/reveal.ts, offsets in styles/style.css.
+// Eager entrance markup; paint/IO in reveal.ts, offsets in style.css.
 // `delay` is a stagger index (0, 1, 2 ...) -> N * 15ms in CSS.
 
 type Props = {
@@ -34,10 +34,10 @@ const {
 ---
 
 <Tag
-  data-reveal
-  data-reveal-variant={variant !== "up" ? variant : undefined}
+  data-reveal={eager ? "" : undefined}
   data-reveal-eager={eager ? "" : undefined}
-  style={`--reveal-delay: ${delay}`}
+  data-reveal-variant={variant !== "up" ? variant : undefined}
+  style={eager ? `--reveal-delay: ${delay}` : undefined}
   class={cn(className)}
 >
   <slot />

src/scripts/reveal.ts

@@ -6,50 +6,21 @@ function revealImmediately(els: HTMLElement[]) {
 
 function initReveal() {
   const all = document.querySelectorAll<HTMLElement>(
-    "[data-reveal]:not([data-revealed])",
+    "[data-reveal-eager]:not([data-revealed])",
   );
   if (all.length === 0) return;
 
+  const reveals = Array.from(all);
   if (!isFirstLoad) {
-    revealImmediately(Array.from(all));
+    revealImmediately(reveals);
     return;
   }
 
-  const eager: HTMLElement[] = [];
-  const scrolled: HTMLElement[] = [];
-  for (const el of all) {
-    if (el.hasAttribute("data-reveal-eager")) eager.push(el);
-    else scrolled.push(el);
-  }
-
-  if (eager.length > 0) {
+  requestAnimationFrame(() => {
     requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        revealImmediately(eager);
-      });
+      revealImmediately(reveals);
     });
-  }
-
-  if (scrolled.length === 0) return;
-
-  if (typeof IntersectionObserver === "undefined") {
-    revealImmediately(scrolled);
-    return;
-  }
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      for (const entry of entries) {
-        if (!entry.isIntersecting) continue;
-        const el = entry.target as HTMLElement;
-        el.dataset.revealed = "true";
-        observer.unobserve(el);
-      }
-    },
-    { rootMargin: "0px 0px -10% 0px", threshold: 0.05 },
-  );
-
-  for (const el of scrolled) observer.observe(el);
+  });
 }
 
 if (document.readyState === "loading") {

src/styles/style.css

@@ -180,7 +180,7 @@
 }
 
 @layer utilities {
-  [data-reveal] {
+  [data-reveal-eager] {
     opacity: 0;
     transform: translateY(12px);
     transition:
@@ -190,46 +190,46 @@
     will-change: opacity, transform;
   }
 
-  html[data-spa-nav] [data-reveal] {
+  html[data-spa-nav] [data-reveal-eager] {
     transition-duration: 250ms;
     transition-delay: 0ms;
   }
-  html[data-spa-nav] [data-reveal] {
+  html[data-spa-nav] [data-reveal-eager] {
     transform: translateY(6px);
   }
-  html[data-spa-nav] [data-reveal][data-reveal-variant="down"] {
+  html[data-spa-nav] [data-reveal-eager][data-reveal-variant="down"] {
     transform: translateY(-6px);
   }
-  html[data-spa-nav] [data-reveal][data-reveal-variant="left"] {
+  html[data-spa-nav] [data-reveal-eager][data-reveal-variant="left"] {
     transform: translateX(-8px);
   }
-  html[data-spa-nav] [data-reveal][data-reveal-variant="right"] {
+  html[data-spa-nav] [data-reveal-eager][data-reveal-variant="right"] {
     transform: translateX(8px);
   }
-  html[data-spa-nav] [data-reveal][data-reveal-variant="fade"] {
+  html[data-spa-nav] [data-reveal-eager][data-reveal-variant="fade"] {
     transform: none;
   }
-  html[data-spa-nav] [data-reveal][data-reveal-variant="scale"] {
+  html[data-spa-nav] [data-reveal-eager][data-reveal-variant="scale"] {
     transform: scale(0.98);
   }
 
-  [data-reveal][data-reveal-variant="down"] {
+  [data-reveal-eager][data-reveal-variant="down"] {
     transform: translateY(-12px);
   }
-  [data-reveal][data-reveal-variant="left"] {
+  [data-reveal-eager][data-reveal-variant="left"] {
     transform: translateX(-16px);
   }
-  [data-reveal][data-reveal-variant="right"] {
+  [data-reveal-eager][data-reveal-variant="right"] {
     transform: translateX(16px);
   }
-  [data-reveal][data-reveal-variant="fade"] {
+  [data-reveal-eager][data-reveal-variant="fade"] {
     transform: none;
   }
-  [data-reveal][data-reveal-variant="scale"] {
+  [data-reveal-eager][data-reveal-variant="scale"] {
     transform: scale(0.96);
   }
 
-  [data-reveal][data-revealed="true"] {
+  [data-reveal-eager][data-revealed="true"] {
     opacity: 1;
     transform: none;
   }
@@ -458,8 +458,8 @@
     scroll-behavior: auto !important;
   }
 
-  [data-reveal],
-  [data-reveal][data-reveal-variant] {
+  [data-reveal-eager],
+  [data-reveal-eager][data-reveal-variant] {
     opacity: 1 !important;
     transform: none !important;
     transition: none !important;