feat(docs): add bullet throb animation on scroll

Teal bullet dots pulse with a staggered throb when list items scroll
into view. Uses IntersectionObserver with 120ms stagger per item.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-09 23:04:11 -05:00
parent ff09382e3a
commit 040f0335c1
2 changed files with 42 additions and 0 deletions

View File

@@ -226,6 +226,36 @@
});
}
/* -------------------------------------------------- */
/* 8. Bullet throb on scroll (landing page) */
/* -------------------------------------------------- */
function initBulletThrob() {
var items = document.querySelectorAll('.content-list li');
if (!items.length) return;
var observer = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
/* stagger each bullet by its index within the list */
var li = entry.target;
var siblings = Array.from(li.parentElement.children);
var idx = siblings.indexOf(li);
setTimeout(function () {
li.classList.add('in-view');
}, idx * 120);
observer.unobserve(li);
}
});
},
{ threshold: 0.3 }
);
items.forEach(function (item) {
observer.observe(item);
});
}
/* -------------------------------------------------- */
/* Init on DOMContentLoaded */
/* -------------------------------------------------- */
@@ -237,5 +267,6 @@
initReveal();
initSmoothScroll();
initActiveNav();
initBulletThrob();
});
})();