Smooth Animations with requestAnimationFrame
Sync your code to the browser's repaint cycle for smooth, efficient animations with `requestAnimationFrame`. Use it for any visual change over time, like moving an element or running a game loop.
`requestAnimationFrame` is the browser's scheduler for butter-smooth animations. Instead of a choppy `setTimeout` loop, it calls your function just before the next screen repaint (e.g., 60 or 120 fps). This is the standard for game loops or any scripted visual change, and it pauses in background tabs to save battery. The biggest footgun is ignoring the timestamp argument; animations must use elapsed time to run at a consistent speed on all monitors.
Read the original → developer.mozilla.org
- #web apis
- #animation
- #performance
- #javascript
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.