draf

0.1.1 • Public • Published

draf

double requestAnimationFrame (double RAF) as an npm package

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.1
    28
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.1.1
    28
  • 0.1.0
    0

Package Sidebar

Install

npm i draf

Weekly Downloads

17

Version

0.1.1

License

ISC

Last publish

Collaborators

  • ryanve