Animation frame — smooth UI updates

Pattern

Drag, scroll, resize emit events more than 60 times a second — more often than the screen draws frames. Every extra render call is wasted computation. Sync updates with requestAnimationFrame.

The problem it solves

Every pointermove updates the DOM position, and the browser tries to render more often than needed. Jank, choppy animation, a hot battery. An imperative requestAnimationFrame queue quickly gets complex.

Operators and why they matter

• throttleTime(16, animationFrameScheduler, {leading, trailing}) — cap emissions to browser frames (~60fps).
• observeOn(animationFrameScheduler) — move the downstream work onto the animation frame.
• map — build a render command.

Gotchas

• debounceTime — the drag will lag because it waits for a pause. Use it only for terminal events.
• Without a trailing config the last position can be lost — the element "gets stuck" at the wrong point.
• animationFrameScheduler doesn't work on SSR. Guard it behind a browser check, or the build breaks.