Skip to content

ryanve/draf

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4226094 · Dec 27, 2018

History

7 Commits
Jun 18, 2017
Jun 19, 2017
Jun 18, 2017
Jun 18, 2017
Jun 19, 2017
Jun 18, 2017
Dec 27, 2018
Jun 18, 2017
Jun 18, 2017
Jun 19, 2017
Dec 27, 2018
Jun 18, 2017

Repository files navigation

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)
})