diff --git a/apps/product-site/src/components/sections/Ecosystem.tsx b/apps/product-site/src/components/sections/Ecosystem.tsx index d37da51..47b0595 100644 --- a/apps/product-site/src/components/sections/Ecosystem.tsx +++ b/apps/product-site/src/components/sections/Ecosystem.tsx @@ -13,24 +13,38 @@ export function Ecosystem() { if (grid) { const bars = grid.querySelectorAll('.report-bar'); const ring = grid.querySelector('.ring-progress'); - let done = false; - + const timeouts: ReturnType[] = []; + obs = new IntersectionObserver( (entries) => { entries.forEach((entry) => { - if (entry.isIntersecting && !done) { - done = true; + if (entry.isIntersecting) { bars.forEach((bar, i) => { - setTimeout(() => { - if (bar.dataset.w) bar.style.width = bar.dataset.w; - }, i * 150); + timeouts.push( + setTimeout(() => { + if (bar.dataset.w) bar.style.width = bar.dataset.w; + }, i * 150) + ); }); if (ring && ring.dataset.dash) { - setTimeout(() => { - ring.style.strokeDasharray = ring.dataset.dash!; - }, 200); + timeouts.push( + setTimeout(() => { + ring.style.strokeDasharray = ring.dataset.dash!; + }, 200) + ); + } + } else { + // Clear pending timeouts + timeouts.forEach(clearTimeout); + timeouts.length = 0; + + // Reset elements to trigger transition again on next enter + bars.forEach((bar) => { + bar.style.width = '0'; + }); + if (ring) { + ring.style.strokeDasharray = '0 213.6'; } - obs.disconnect(); } }); },