https://github.com/ryanve/draf

double RAF JavaScript module
https://github.com/ryanve/draf

animation dom jank javascript performance reactive requestanimationframe ui

Last synced: about 1 month ago
JSON representation

double RAF JavaScript module

• Host: GitHub
• URL: https://github.com/ryanve/draf
• Owner: ryanve
• License: isc
• Created: 2017-06-17T23:11:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-27T00:03:32.000Z (almost 6 years ago)
• Last Synced: 2024-09-15T14:19:39.177Z (about 2 months ago)
• Topics: animation, dom, jank, javascript, performance, reactive, requestanimationframe, ui
• Language: HTML
• Homepage: https://ryanve.github.io/draf/
• Size: 11.7 KB
• Stars: 14
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# `draf`

### double `requestAnimationFrame` (double RAF) as an [npm package](https://www.npmjs.com/package/draf)

```

npm install draf

```

## [use case](https://youtu.be/mmq-KVeO-uU?t=14m0s)

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.

```js

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`

```js

draf(function(stamp) {

  console.log(stamp)

})

```