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
6
votes
2 answers

What is the blank space in chrome's new vertical timeline?

I'm running a simple viewbox animation in raphael using requestAnimationFrame in chrome. I'm noticing all scripting and rendering tasks are completed yet I still see anywhere between 30 and 60ms of "dead space" where it looks like the browser is…
tencircles
  • 211
  • 1
  • 6
5
votes
1 answer

setTimeOut yields 233 fps while requestAnimationFrame yields 61

I did some tests on Chrome and requestAnimationFrame yielded 61 fps while setTimeOut( callback, 0 ), yielded 233 fps. If one would like to have more than 61 fps (which I'm not sure what for) but wouldn't it be better to render with setTimeOut and…
Petruza
  • 11,744
  • 25
  • 84
  • 136
5
votes
2 answers

Confusion about frame drops and requestAnimationFrame

Please free feel to point out if my following understanding is wrong: Assume our display refresh rate is 60hz (I know it is not always the case but let's just assume it is 60hz) so the web page would refresh the screen 60 times every second if…
Joji
  • 4,703
  • 7
  • 41
  • 86
5
votes
1 answer

How to use requestAnimationFrame inside a Class object

I have a class that takes some coordinate and duration data. I want to use it to animate an svg. In more explicit terms, I want to use that data to change svg attributes over a time frame. I'm using a step function and requestAnimationFrame outside…
icicleking
  • 1,029
  • 14
  • 38
5
votes
1 answer

Why doesn't window.open get blocked on a setTimeout <= 1000ms?

document.querySelector('#ontime').onclick = function() { setTimeout(() => { window.open('https://www.google.com'); }, 1000); }; When using window.open after a user click with a timeout <= 1000ms (or a Promise.resolve().then(...)) it…
5
votes
4 answers

How can code detect if running inside an animation frame?

If some function is passed into requestAnimationFrame(), how can that function detect that it is being called inside an animation frame? f.e. function someFunction() { if (/* What goes here? */) { console.log('Inside animation frame.') } …
trusktr
  • 44,284
  • 53
  • 191
  • 263
5
votes
1 answer

requestAnimationFrame called right before the end of the frame?

I've been experimenting with jank-free rendering of complex scenes on HTML5 canvas. The idea is to split rendering into multiple batches with each batch taking a maximum of, say 12 ms, so that the concurrently running animations (very cheap to…
5
votes
1 answer

What does and doesn't cause repaints/reflows when inside requestAnimationFrame?

For example, if I do something like requestAnimationFrame(function() { el.appendChild(otherEl) el.appendChild(anotherEl) anotherEl.removeChild(someOtherEl) anotherEl.appendChild(yetAnotherEl) }) Does that cause a (synchronous?)…
trusktr
  • 44,284
  • 53
  • 191
  • 263
5
votes
0 answers

Is there a point running request animation frame at 25 fps

Is it worth using request animation frame if I am forcing it to go on 25 FPS. This is why I am asking: Normal RAF behaviour: a1000ms / 60 fps = 16.66a That is a standard refresh rate of most monitors. Dropping FPS to 30 : 1000 / 30 = 33.33 that is…
iGoogle
  • 136
  • 9
5
votes
2 answers

How should I use requestAnimationFrame and setTimeout in parallel to make a better game loop?

My goal is to create an efficient game loop that uses requestAnimationFrame for updating the display canvas and setTimeout for updating the game logic. My question is should I put all the drawing operations inside the requestAnimationFrame loop or…
Frank
  • 2,050
  • 6
  • 22
  • 40
5
votes
2 answers

How can I tell when the browser stops repainting DOM layers/nodes because they are obscured?

Identification: I'm looking at all possible solutions for detecting when the FPS drop or the repaints/reflows stop happening in a browser due to the browser optimizing performance because an area of the document is out of view. Observation: So far…
5
votes
3 answers

Canvas rotate circle in certain speed using RequestAnimationFrame

I made a quick simple solution in JSFiddle, for better and faster explaining: var Canvas = document.getElementById("canvas"); var ctx = Canvas.getContext("2d"); var startAngle = (2*Math.PI); var endAngle = (Math.PI*1.5); var currentAngle = 0; var…
5
votes
0 answers

requestAnimationFrame Parallax Scrolling

I'm building a site with parallax scrolling backgrounds similar to the spotify.com homepage. I'm using transform3d to move the images around and thought I'd wrap the animation in requestAnimationFrame for improved performance. Works great in Chrome…
fatlinesofcode
  • 1,647
  • 18
  • 22
5
votes
2 answers

requestAnimFrame can't give a constant frame rate, but my physics engine needs it

I use Box2D with WebGL. Box2D demands a constant frame rate (time steps for it's "world" updates). function update(time) {//update of box2d world world.Step( 1/60 // 1 / frame-rate , 3 //velocity iterations , …
batman
  • 5,022
  • 11
  • 52
  • 82
5
votes
2 answers

Is calling requestAnimationFrame with Raphael a performance hit?

I'm working on a fairly resource hungry web application which heavily relies on Raphael.js for roughly 50% of the animations used, the rest I have rolled my own animation method which uses webkitRequestAnimationFrame in conjunction with the the Web…
tencircles
  • 211
  • 1
  • 6