summaryrefslogtreecommitdiffstats
path: root/assets/js/scroll-reveal.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js/scroll-reveal.js')
-rw-r--r--assets/js/scroll-reveal.js36
1 files changed, 25 insertions, 11 deletions
diff --git a/assets/js/scroll-reveal.js b/assets/js/scroll-reveal.js
index ab099c0..026d1be 100644
--- a/assets/js/scroll-reveal.js
+++ b/assets/js/scroll-reveal.js
@@ -1,6 +1,7 @@
/**
* scroll-reveal.js
- * IntersectionObserver for revealing elements on scroll
+ * IntersectionObserver for revealing elements on scroll.
+ * Adds 90ms stagger delay per sibling index within each reveal-group.
*/
export function initScrollReveal() {
@@ -11,16 +12,29 @@ export function initScrollReveal() {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
- if (entry.isIntersecting) {
- entry.target.classList.add('revealed');
- observer.unobserve(entry.target);
- }
+ if (!entry.isIntersecting) return;
+
+ const el = entry.target;
+ const parent = el.parentElement;
+ const siblings = parent
+ ? Array.from(parent.querySelectorAll(':scope > .reveal'))
+ : [];
+ const index = siblings.indexOf(el);
+ const delay = index >= 0 ? index * 90 : 0;
+
+ el.style.transitionDelay = delay + 'ms';
+ el.classList.add('revealed');
+
+ // Remove inline delay after transition so hover transitions are unaffected
+ const cleanup = () => {
+ el.style.transitionDelay = '';
+ el.removeEventListener('transitionend', cleanup);
+ };
+ el.addEventListener('transitionend', cleanup);
+
+ observer.unobserve(el);
});
- }, {
- threshold: 0.1,
- });
+ }, { threshold: 0.1 });
- revealElements.forEach((el) => {
- observer.observe(el);
- });
+ revealElements.forEach((el) => observer.observe(el));
}