From f79f85bdde7a2b1622d0deb393478fc0b606ad26 Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Thu, 23 Jul 2026 18:04:24 +0200 Subject: [PATCH] Refine chart animation trigger logic - Adjusted IntersectionObserver to wait for the entire chart frame to enter the viewport before triggering animation, using `threshold: 1`. - Updated observer options for smoother and more intuitive growth visualization. --- web/components/widgets/charts.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/components/widgets/charts.tsx b/web/components/widgets/charts.tsx index 5a32d561..6f34b062 100644 --- a/web/components/widgets/charts.tsx +++ b/web/components/widgets/charts.tsx @@ -230,15 +230,18 @@ export function MemberGrowth() { setPhase('done') return } + // Hold off until the whole figure frame — plot plus its margin — has scrolled into view, not the + // instant its top edge appears: the reader is still on the copy above it, and a curve that grows + // off-screen isn't watched. threshold: 1 fires only once the entire element is within the viewport. const obs = new IntersectionObserver( (entries) => { - if (entries.some((e) => e.isIntersecting)) { + if (entries.some((e) => e.intersectionRatio >= 1)) { obs.disconnect() setPhase('drawing') window.setTimeout(() => setPhase('done'), GROWTH_DRAW_MS) } }, - {rootMargin: '0px 0px -10% 0px'}, + {threshold: 1}, ) obs.observe(el) return () => obs.disconnect()