JavaScript requestAnimationFrame

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • window.requestAnimationFrame(callback);
  • window.webkitRequestAnimationFrame(callback);
  • window.mozRequestAnimationFrame(callback);

Parameters

ParameterDetails
callback"A parameter specifying a function to call when it's time to update your animation for the next repaint." (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Remarks

When it comes to animating DOM elements fluidly, we are limited to the following CSS transitions:

  • POSITION - transform: translate (npx, npx);
  • SCALE - transform: scale(n);
  • ROTATION - transform: rotate(ndeg);
  • OPACITY - opacity: 0;

However, using these is no guarantee that your animations will be fluid, because it causes the browser to start new paint cycles, regardless of what else is going on. Basically, paint are made inefficiently and your animation looks "janky" because the frames per second (FPS) suffers.

To guarantee smooth-as-possible DOM animations, requestAnimationFrame must be used in conjunction with the above CSS transitions.

The reason this works, is because the requestAnimationFrame API lets the browser know that you want an animation to happen at the next paint cycle, as opposed to interrupting what's going on to force a new paint cycle in when a non-RAF animation is called.

ReferencesURL
What is jank?http://jankfree.org/
High Performance Animationshttp://www.html5rocks.com/en/tutorials/speed/high-performance-animations/.
R.A.I.L.https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en
Analyzing Critical Rendering Pathhttps://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Rendering Performancehttps://developers.google.com/web/fundamentals/performance/rendering/?hl=en
Analyzing Paint Timeshttps://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en
Identifying Paint Bottleneckshttps://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en


Got any JavaScript Question?