0.2.0 • Published 7 years ago

set-animation-frame v0.2.0

Weekly downloads
5
License
MIT
Repository
github
Last release
7 years ago

setAnimationFrame

Delay a function call without the use of setTimeout()

// Heads up!
// Animation timing functions work in enviroments that either render or 
// simulate the rendering of frames. (will typically not work in nodejs or the dev tools console)

ES6

import { setAnimationFrame, clearAnimationFrame } from 'set-animation-frame'

// Set a delay for 3000ms.
const clearId = setAnimationFrame((timeStamp) => console.log(`Finished at ${timeStamp}`,3000)

// Interrupt the delay at any moment.
clearAnimationFrame(clearId)

ES5

const setAnimationFrame = SAF.setAnimationFrame
const clearAnimationFrame = SAF.clearAnimationFrame
  • setAnimationFrame May require a requestAnimationFrame & cancelAnimationFrame polyfill (polyfill).
  • setAnimationFrame passes the given function the DOMHighResTimeStamp as a parameter.
  • The delay units are in miliseconds.

Why not use setTimeout?

Checkout Better Performance With requestAnimationFrame By Luz Caballero


Browser support using the requestFrame polyfill. npm i --save request-frame

  • IE 5.5+

Browser Support Without a polyfill or vendor prefix usage.

  • IE10+

See caniuse for more details.

MIT License

Copyright (c) 2016 Julien Etienne