draf
requestAnimationFrame
(double RAF) as an npm package
double npm install draf
use case
Double RAF is useful for ensuring that animations start before expensive rendering is done. It helps provide smoother user experience by making animations feel reactive. Normal rendering would block the animation from starting. With double RAF as shown here the rendering function safely runs in the main thread after the animation has already started.
const draf = const startAnimating = elementclassListconst renderNextView = {/* ... */}let button = document button
draf(callback)
- returns the request ID from the first
requestAnimationFrame
- callback receives the
DOMHighResTimeStamp
number from the secondrequestAnimationFrame