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();
});
})();

View File

@@ -530,6 +530,17 @@ ul, ol {
height: 8px;
border-radius: 50%;
background: var(--accent);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@keyframes bullet-throb {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.5); }
50% { transform: scale(1.6); box-shadow: 0 0 8px 2px rgba(42, 157, 143, 0.3); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 157, 143, 0); }
}
.content-list li.in-view::before {
animation: bullet-throb 0.6s ease-out;
}
.features-section--alt {