Offsetting Elements on Scroll Acceleration Using a Physics(-ish) Simulation

Testing the feel of a page element lagging behind the user's scroll

Note, this is currently not built for touch scrolling.

How it Works

  • Inside a requestAnimationFrame loop, calculate the scroll speed, direction, and acceleration
  • If scroll speed is accelerating, transform the chosen elements in the opposite direction of the scroll. The transform amount is a function of acceleration.
  • If the page is not scrolling or the scroll speed is decelerating, and the elements are offset, move them back towards their proper position. The transform amount is a function of how far offset the element is.
  • CSS transforms are used so the elements can exist within the page flow.

I originally tried this with some more realistic physics models, like an object on a piece of ice that is being pushed around or a spring. Neither of these felt great, so the stretch behavior is more based on what feels good than a model of something real. Hence, physics-ish!

I generally hate anything that messes with how scrolling a page feels. There is a good chance a this would get extremely annoying if not implemented carefully, but it is a fun idea. In the demo, the effect is subtle, and the page and its text scrolls normally, which I think lets the user still feel in control. Give the page a sharp scroll to see a more exaggerated effect.

Demo code isn't minified, so just check out the physics-scroll.js file in your console. View Demo.