rafl

request animation frame

Usage no npm install needed!

<script type="module">
  import rafl from 'https://cdn.skypack.dev/rafl';
</script>

README

rafl

A fork of the seemingly-abandoned component/raf with added support for IE 11, web workers, and node.

Build status

Install

$ npm install rafl

Example

Request the animation frame with raf(fn), cancel with raf.cancel(id).

var raf = require('rafl')

var x = 0
var y = 50
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')

function animate() {
  raf(animate)
  draw()
}

var prev = Date.now()
function draw() {
  var curr = Date.now()
  var diff = curr - prev
  var p = diff / 16
  ctx.clearRect(0, 0, 900, 300)
  ctx.beginPath()
  ctx.globalAlpha = .5
  ctx.arc(x, y, 10, 0, Math.PI * 2, false)
  ctx.fill()
  x += 2
  y += Math.sin(x/20) * 5
  prev = curr
}

animate()

Page weight (browserified)

compression size
rafl.js 1.19 kB
rafl.min.js 865 B
rafl.min.js.gz 449 B

License

MIT