Smooth Scrolling
✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jan 20, 2012
This example demonstrates a playful, self-scrolling page where a series of "Whee!" headings cascade down the viewport, driven entirely by a D3.js transition. The page uses a custom tween, defined via `d3.transition().tween`, to interpolate the window’s vertical scroll offset from its starting position to the bottom of the document. Specifically, `scrollTween` creates an interpolator with `d3.interpolateNumber` and applies it inside the tween’s returned function, calling `scrollTo` on each tick. The animation begins after a delay, smoothly propelling the reader through the page’s content over 7.5 seconds.
AI-generated descriptionThis example uses a custom tween that interpolates the window’s vertical scroll offset.
gpl-3.0 Licensed