RequestaniMationFrame JS
/* Tells the browser that you wish to perform an animation and
requests that the browser call a specified function
to update an animation before the next repaint. */
requestAnimationFrame(() => {
// some animation-related/dependent code here
});
/* The callback function is automatically passed a timestamp
indicating the precise time requestAnimationFrame() was called at.
requestAnimationFrame() returns a non-zero integer that can be passed into
cancelAnimationFrame() to cancel a requestAnimationFrame() call */
/* Advantages over setTimeout(..., 1000/60) approach:
- The browser can optimize it, so animations will be smoother
- Animations in inactive tabs will stop, allowing the CPU to chill
- More battery-friendly */
Anxious Alpaca
