Progress Tracking — ScrollToSmooth v4

onScrollUpdate

Real-time scroll progress.

Click any link in the section bar above to trigger a scrollToSmooth animation. The green bar beneath the nav fills as the animation runs — that's the progress value from onScrollUpdate, normalized 0 → 1.

The panel on the right shows all four values that the callback receives on every animation frame. Click between sections and watch the numbers update live.

ScrollUpdateData

The callback API.

On every animation frame, onScrollUpdate is called with a ScrollUpdateData object:

new scrollToSmooth('a[href^="#"]', {
  onScrollUpdate: function (data) {
    data.progress         // 0 → 1, follows the easing curve
    data.currentPosition  // scroll position this frame (px)
    data.startPosition    // where the animation began (px)
    data.endPosition      // where the animation is heading (px)
  }
})
      

progress tracks the easing curve, not raw distance — at 50% of elapsed time an easeInOutQuart animation is only ~19% of the way to its target. Use currentPosition for raw pixel metrics.

Ideas

What can you build with it?

Reading-progress bars, parallax tied to scroll position, counter animations, colour interpolation between sections, custom loading indicators — anything that should respond to scroll animation state.

Since progress is a 0–1 float you can multiply it into any range: progress * 360 for a hue rotation, 'rgb(' + lerp(0,255,p) + ',0,0)' for a colour blend, or progress * maxScale for a transform.

This page

How this demo works.

The green bar and the live panel are driven entirely by onScrollUpdate. The setup is six lines:

var bar = document.getElementById('anim-bar');

new scrollToSmooth('a[href^="#"]', {
  onScrollUpdate: function (data) {
    bar.style.width = (data.progress * 100) + '%';
  },
  onScrollEnd: function () {
    bar.style.width = '100%';
    setTimeout(function () { bar.style.width = '0%'; }, 400);
  }
}).init();
      

onScrollEnd snaps the bar to 100% then fades it back to 0 after a short delay, ready for the next navigation.