Loading

All articles

Performance · 6 min read

Scroll-Driven Animations That Don't Lag

Published 18 June 2026 by Syed_exe

Frame sequences look cinematic but they are brutal on low-end hardware if you load them naively. Three hundred parallel image requests will saturate the network and starve the main thread exactly when the user starts scrolling.

The fix is bounded concurrency: queue every frame, run six workers on desktop and three on mobile, and decode each one into an ImageBitmap so the compositor never has to re-decode during paint.

Next, stop reading layout inside the scroll handler. Cache scrollHeight in a ResizeObserver and only recompute on resize — a single offsetHeight read per scroll event is enough to cause jank on a 60Hz phone.

Finally, never stack backdrop-blur over a canvas that repaints every frame. The blur has to be recomputed on every paint, and it is almost always the single most expensive thing on the page.

Need this done on your project?

Start a Project