mike/inga-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inga stats: fire count-up after the section reveal so the increment is visible

Browse Source 
The count was triggered on the tiny number spans at the same moment the section
began fading in, so 0->100 happened while the wrap was still opacity 0 and you
only saw the tail. Observe the .stats block at threshold .6 (fires once it's truly
on-screen, after the reveal) and run regardless of reduced-motion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 23:00:41 -07:00
parent c93783c5e8
commit 6ba842fea7
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+13 -6
View File
@@ -322,12 +322,14 @@
onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
}
// count the proof numbers up when they scroll into view
// count the proof numbers up when the stats block is discovered (after its reveal,
// so the increment is actually on-screen — not hidden behind the fade-in)
var statsEl = document.querySelector('.stats');
var counters = [].slice.call(document.querySelectorAll('[data-count]'));
if (counters.length && !rm && 'IntersectionObserver' in window) {
if (statsEl && counters.length && 'IntersectionObserver' in window) {
counters.forEach(function (c) { c.textContent = '0'; });
var run = function (el) {
var to = parseInt(el.getAttribute('data-count'), 10), dur = 1500, t0 = null;
var to = parseInt(el.getAttribute('data-count'), 10), dur = 1600, t0 = null;
var tick = function (ts) {
if (!t0) t0 = ts;
var p = Math.min((ts - t0) / dur, 1), e = 1 - Math.pow(1 - p, 3);
@@ -336,10 +338,15 @@
};
requestAnimationFrame(tick);
};
var started = false;
var nio = new IntersectionObserver(function (es) {
es.forEach(function (e) { if (e.isIntersecting) { run(e.target); nio.unobserve(e.target); } });
}, { threshold: 0.5 });
counters.forEach(function (c) { nio.observe(c); });
es.forEach(function (e) {
if (e.isIntersecting && !started) { started = true; counters.forEach(run); nio.disconnect(); }
});
}, { threshold: 0.6 });
nio.observe(statsEl);
} else {
counters.forEach(function (c) { c.textContent = c.getAttribute('data-count'); });
}
})();
</script>