Scroll-Triggered Stat Line Draw for an Explainer Block

Scroll-Triggered Stat Line Draw for an Explainer Block

This svg animation example shows how to animate a stat line when an explainer block enters the viewport. The effect is simple but highly effective: a line draws itself over 700ms, then two data points appear with a small stagger to suggest progression, timing, and visual emphasis.

Because the primary surface is an explainer block, the animation should feel supportive rather than distracting. The ideal implementation uses stroke-dasharray and stroke-dashoffset for the line draw, plus a minimal JavaScript scroll trigger that adds a class once and never replays on minor scroll jitter. If JavaScript is unavailable, the block should still display cleanly in its static state.

Why this pattern works

Motion in explainer content should clarify information, not compete with it. A line-draw animation helps direct the eye along a path, while the points reinforce key values or milestones. The stagger between points creates a gentle rhythm that feels more natural than everything appearing at once.

• Clear narrative: The line visually “builds” the story.
• Lightweight: CSS handles most of the work.
• Accessible fallback: Static SVG still communicates the message.
• Once-only playback: The effect runs when the block enters view and stays complete.

Recommended structure

For this SVG animation example, keep the markup simple. The SVG contains one path for the line and two point elements that can be circles, groups, or icon-like markers. The container gets a class when it has entered view, and CSS transitions handle the reveal.

<div class="stat-explainer" data-animate-once>
  <svg viewBox="0 0 640 240" class="stat-chart" aria-hidden="true">
    <path class="chart-line" d="M60 170 C140 140, 220 120, 300 130 S460 110, 580 80" />
    <circle class="stat-point point-1" cx="300" cy="130" r="6" />
    <circle class="stat-point point-2" cx="580" cy="80" r="6" />
  </svg>
</div>

This example uses a single smooth curve, but the same technique works for a stepped line, a trend path, or a more custom illustration. As long as the path has a fixed length, it can be animated reliably with CSS.

CSS for the line draw and point reveal

The key to the draw effect is to render the line in a hidden state first by setting its dash offset to the full path length. When the container gains an active class, the dash offset transitions to zero over 700ms. The points can start slightly lower and transparent, then fade and translate into place.

.stat-explainer {
  --draw-duration: 700ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

.chart-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset var(--draw-duration) var(--ease-out);
}

.stat-point {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.stat-explainer.is-animated .chart-line {
  stroke-dashoffset: 0;
}

.stat-explainer.is-animated .point-1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 700ms;
}

.stat-explainer.is-animated .point-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 780ms;
}

A few notes on the timing:

• The line finishes at 700ms.
• The first point appears after the draw completes.
• The second point is delayed by 80ms to create the stagger.

If you want the points to feel more “live,” you can also scale them from 0.92 to 1.0 or add a tiny blur-to-sharp transition. Just keep the motion subtle so the block stays readable.

Minimal JS scroll trigger

To keep the implementation light, use an IntersectionObserver. This avoids heavy scroll listeners and makes once-only playback straightforward. When the explainer block enters the viewport, add a class and disconnect the observer so the animation cannot replay on small scroll movements.

const blocks = document.querySelectorAll('[data-animate-once]');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-animated');
      obs.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.35
});

blocks.forEach(block => observer.observe(block));

This is enough for most cases. If you want the animation to trigger a little earlier, lower the threshold. If your explainer block is tall, a root margin such as rootMargin: '0px 0px -10% 0px' can help it start at the right moment.

Clean fallback without JavaScript

Since the design must degrade cleanly without JS, the default state should be visually acceptable. There are two common approaches:

1. Show the final state by default and only animate when JS enhances the block.
2. Hide the animation only when JS is active using a class on the document root.

For this use case, a progressive enhancement pattern is best. The static SVG appears fully drawn if JavaScript is missing, while the animated version is only enabled when the observer runs.

/* Default: static, readable state */
.chart-line {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

/* Enhanced mode only */
.js .chart-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.js .stat-point {
  opacity: 0;
  transform: translateY(8px);
}

Then add a single class to the root element early in your enhancement script:

document.documentElement.classList.add('js');

This ensures the content remains readable for all users, including those with reduced motion preferences or blocked scripts.

Best practices for a polished result

To make this svg animation example feel production-ready, pay attention to the details that often get overlooked:

• Use a real path length when possible: If the line length is known, set the dash array to match it for smoother results.
• Keep easing soft: A gentle easing curve works better than a harsh snap.
• Respect reduced motion: Consider disabling the animation for users who prefer less motion.
• Align with content timing: Trigger the animation when the explanatory text is ready to be read.
• Avoid replays: Once the path has drawn, keep it complete.

Reduced motion support

For accessibility, disable the motion when the user requests reduced animation. The content still looks complete, and the visual hierarchy remains intact.

@media (prefers-reduced-motion: reduce) {
  .chart-line,
  .stat-point {
    transition: none !important;
    animation: none !important;
  }

  .chart-line {
    stroke-dashoffset: 0;
  }

  .stat-point {
    opacity: 1;
    transform: none;
  }
}

Where this pattern fits best

This type of SVG animation is ideal for product explainers, onboarding blocks, landing page feature callouts, and any section that needs a small dose of motion to make a data point feel more important. It also works well when paired with a headline, a short paragraph, and one strong supporting visual.

If you want to adapt the same structure for different content, you can animate a KPI trend, a milestone timeline, or a small performance chart. The recipe stays the same: one path draw, a couple of timed reveals, and a scroll trigger that activates only once.

Conclusion

A scroll-triggered stat line draw is one of the most practical ways to add motion to an explainer block without overcomplicating the build. With CSS handling the line animation, minimal JavaScript handling the viewport trigger, and graceful fallback behavior for non-JS environments, you get a polished effect that feels modern, fast, and dependable.

For SVG-Animation.com, this is the kind of svg animation example that demonstrates both craft and restraint: a small interaction that improves comprehension while keeping performance and accessibility in balance.