Questions tagged [requestanimationframe]

HTML5 window.requestAnimationFrame API is an alternative to setTimeout for animations or applications running in a loop.

The HTML5 window.requestAnimationFrame(callback) function sends a request to the browser that the callback() function is to be called before the next repaint of the window.

When the callback() function is invoked, it is passed a DOMHighResTimeStamp parameter, indicating the time in milliseconds at which the callback function was called.

To continue an animation, call the requestAnimationFrame() function from within itself:

function nextFrame(timeStamp) {
// animation
requestAnimationFrame(nextFrame); // repeats the animation
}

requestAnimationFrame(nextFrame); // starts the animation

The browser handles the repaint.

Specification

Resources

804 questions
10
votes
1 answer

Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.

Not sure what I'm doing wrong here... window.requestAnimFrame = function(){ return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame …
natecraft1
  • 2,737
  • 9
  • 36
  • 56
9
votes
1 answer

Why does requestAnimationFrame function accept an element as an argument?

I am just trying to understand why the hell window.requestAnimationFrame is accepting the second parameter as an element, what is the reason behind that? I am curious to know the underlying execution for this function....
9
votes
2 answers

When compiling Rust to wasm (web assembly), how can I sleep for 10 milliseconds?

My rust program is managing memory for a 2d html canvas context, and I'm trying to hit ~60fps. I can calculate the delta between each frame easily, and it turns out to be roughly ~5ms. I'm unclear on how to put my Rust webassembly program to sleep…
sgrove
  • 1,149
  • 2
  • 11
  • 23
9
votes
1 answer

Exact time of display: requestAnimationFrame usage and timeline

What I want to achieve is to detect the precise time of when a certain change appeared on the screen (primarily with Google Chrome). For example I show an item using $("xelement").show(); or change it using $("#xelement").text("sth new"); and then I…
gaspar
  • 898
  • 1
  • 13
  • 26
9
votes
1 answer

Why is it recommend to nest setTimeout in requestAnimationFrame when scheduling something after a repaint?

In the mozilla docs on performance best practices for front-end engineers it's recommended to combine setTimeout with requestAnimationFrame to run something immediately after a repaint: requestAnimationFrame(() => { setTimeout(() => { // This…
user5918874
9
votes
2 answers

Html5 Canvas "Composite Layers" causing long frames

I have a javascript client that runs on a web page, drawing with requestAnimationFrame to the canvas and communicating via websockets to my NodeJS backend server (using the 'ws' module on the server side). Profiling with Chrome DevTools, it seems…
9
votes
1 answer

react.js - Render on requestAnimationFrame

I want to experiment with performance of some React components inside my app. I know that ClojureScript's Om framework (https://github.com/swannodette/om) uses some optimization techniques like using immutables with implementing…
Kosmetika
  • 20,774
  • 37
  • 108
  • 172
9
votes
4 answers

How can I improve performance on my parallax scroll script?

I'm using Javascript & jQuery to build a parallax scroll script that manipulates an image in a figure element using transform:translate3d, and based on the reading I've done (Paul Irish's blog, etc), I've been informed the best solution for this…
marked-down
  • 9,958
  • 22
  • 87
  • 150
9
votes
2 answers

running requestAnimationFrame from within a new object

I'm having trouble running an animation. This is inside var ob1 = function() {};. When called, it runs for a while and then I get the error Uncaught RangeError: Maximum call stack size exceeded. However, this same structure has no problems running…
JVE999
  • 3,327
  • 10
  • 54
  • 89
9
votes
7 answers

Javascript - Can't Adjust FrameRate - requestanimationframe

I start the loop function gameLoop(){ update(); draw(); requestAnimFrame(gameLoop); } var requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || …
user2806040
9
votes
2 answers

Achieve somewhat stable framerate with requestAnimationFrame?

I am playing around with the requestAnimationFrame but I get very jerky animations in any other browser than Chrome. I create an object like this: var object = function() { var lastrender = (new Date()).getTime(); var delta = 0; …
acrmuui
  • 2,040
  • 1
  • 22
  • 33
8
votes
1 answer

Measure CPU Load Difference Between Four Similar Javascript Functions

Why this is important to me I have a site where I need to have a countdown timer running to show people how much time they have left to complete an action. This timer will run for days and probably just use MomentJS to say something like "in 4 days"…
8
votes
3 answers

How to lock FPS with requestAnimationFrame?

I used script from Paul Irish https://gist.github.com/paulirish/1579671 to create animation loop inside html site. It works although it's faster in fullscreen mode than in browser window. Also, I observed different speeds depending on canvas size…
mtx
  • 1,196
  • 2
  • 17
  • 41
8
votes
3 answers

Is requestAnimationFrame implementation's recursive?

I'm currently experimenting with three.js, which relies on requestAnimationFrame to perform animations. Wouldn't the following code result in infinite recursion before the cube rotations and renderer.render function are invoked? function render() { …
thelittlegumnut
  • 307
  • 1
  • 4
  • 11
8
votes
5 answers

Up to date polyfill for requestAnimationFrame

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision tells me that recently (Chrome 20) requestAnimationFrame has gained a new sub-millisecond precision timer, and that I have to update my code to…
Chris Jefferson
  • 7,225
  • 11
  • 43
  • 66