refactor: enable re-triggering of ecosystem section animations by resetting states and clearing timeouts on intersection exit
This commit is contained in:
@@ -13,24 +13,38 @@ export function Ecosystem() {
|
|||||||
if (grid) {
|
if (grid) {
|
||||||
const bars = grid.querySelectorAll<HTMLElement>('.report-bar');
|
const bars = grid.querySelectorAll<HTMLElement>('.report-bar');
|
||||||
const ring = grid.querySelector<SVGElement>('.ring-progress');
|
const ring = grid.querySelector<SVGElement>('.ring-progress');
|
||||||
let done = false;
|
const timeouts: ReturnType<typeof setTimeout>[] = [];
|
||||||
|
|
||||||
obs = new IntersectionObserver(
|
obs = new IntersectionObserver(
|
||||||
(entries) => {
|
(entries) => {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
if (entry.isIntersecting && !done) {
|
if (entry.isIntersecting) {
|
||||||
done = true;
|
|
||||||
bars.forEach((bar, i) => {
|
bars.forEach((bar, i) => {
|
||||||
|
timeouts.push(
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (bar.dataset.w) bar.style.width = bar.dataset.w;
|
if (bar.dataset.w) bar.style.width = bar.dataset.w;
|
||||||
}, i * 150);
|
}, i * 150)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
if (ring && ring.dataset.dash) {
|
if (ring && ring.dataset.dash) {
|
||||||
|
timeouts.push(
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
ring.style.strokeDasharray = ring.dataset.dash!;
|
ring.style.strokeDasharray = ring.dataset.dash!;
|
||||||
}, 200);
|
}, 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();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user