Skip to content

Latest commit

 

History

History
33 lines (25 loc) · 1.05 KB

README.md

File metadata and controls

33 lines (25 loc) · 1.05 KB

draf

double requestAnimationFrame (double RAF) as an npm package

npm install draf

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 = require('draf')
const startAnimating = element => element.classList.add('animating')
const renderNextView = function() {/* ... */}
let button = document.createElement('button')

button.addEventListener('click', function() {
  startAnimating(this)
  draf(renderNextView)
})

draf(callback)

  • returns the request ID from the first requestAnimationFrame
  • callback receives the DOMHighResTimeStamp number from the second requestAnimationFrame
draf(function(stamp) {
  console.log(stamp)
})