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
13
votes
3 answers

Endless animations, requestAnimationFrame and call stack limits

I have a little project that I'm working on that consumes the twitter streaming API and makes a little canvas animation from it. Given that the twitter streaming API doesn't conclude, the animation could go on indefinitely. Therein lies the problem.…
qubyte
  • 17,558
  • 3
  • 30
  • 32
13
votes
4 answers

How to use requestAnimationFrame with a TypeScript object?

I have an object that i want to do drawing on a canvas. It will use requestAnimationFrame to start a game loop: Contoso.ts class Contoso { //private ctx: CanvasRenderingContext2D; Initialize(ctx: CanvasRenderingContext2D) { //this.ctx =…
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
13
votes
2 answers

For which browsers are we using Paul Irish's requestAnimationFrame shim?

Paul Irish has a post called requestAnimationFrame for Smart Animating. Now Paul is a smart guy - and I'm just trying to understand the scope of the application of this idea. He says to do HTML5 animation - you should use a requestAnimationFrame…
hawkeye
  • 34,745
  • 30
  • 150
  • 304
13
votes
1 answer

Does d3's transitions and animations use requestAnimationFrame?

I'm trying to figure out if d3's default animations use requestAnimationFrame for the callback already or if I need to do it myself. For example, I have defined a custom tween that calls a redraw function repeatedly to animation a transition from…
Andrew Mao
  • 35,740
  • 23
  • 143
  • 224
12
votes
1 answer

RequestAnimationFrame speeds up/slows down periodically

From my understanding, requestAnimationFrame should run as close as possible to the browser's frame rate, which is approximately 60fps. To ensure that this is indeed taking place, I have been logging timestamps for each requestAnimationFrame…
12
votes
4 answers

How to create an animated counter in React.js?

I'm looking for a way to animate a counter in React. For the sake of the example, I have 3 components of the following structure: Master: logicComponent Counter (Master is the parent of logicComponent and Counter) The logic component passes a…
alexunder
  • 2,075
  • 3
  • 16
  • 29
12
votes
1 answer

Empty requestAnimationFrame loop leaking memory?

I have a clean HTML file with requestAnimationFrame loop that does absolutely no processing. However, if I look at memory consumption on Chrome DevTools I see that used memory constantly increases and garbage collector runs every few seconds to…
12
votes
1 answer

High CPU usage with canvas and requestAnimationFrame

I am facing high CPU usage (30 to 40%) when calling recursively requestAnimationFrame, does anyone has good strategies to lower it down? Simple example: var canvas = document.createElement('canvas'); canvas.width = 100; canvas.height =…
Laurent
  • 977
  • 3
  • 13
  • 27
12
votes
4 answers

Why does calling requestAnimationFrame at the beginning of a loop not cause infinite recursion?

What is going on that allows the rest of the loop to execute, and then for requestAnimationFrame to execute next frame? I am misunderstanding how this method works, and can't see a clear explanation anywhere. I tried reading the timing specification…
dnv
  • 969
  • 1
  • 7
  • 15
12
votes
3 answers

How can I force images to decode on load?

I'm building a site that does parallax scrolling with requestAnimationFrame. There are multiple sections, each with a full-sized background image and some mid- and foreground images as well. I've managed to get this animating relatively smoothly via…
modernserf
  • 300
  • 1
  • 14
11
votes
1 answer

FFMPEG: How to encode for seekable video at high key frame interval

I'm looking for an ffmpeg comand that's best used if I'm controlling a video to mouse control on "requestAnimationFrame". Basically, it needs to be fast-seeking and encoded at a high key frame interval. I can't seem to nail down what parameters aid…
Johnny Slack
  • 133
  • 1
  • 1
  • 6
11
votes
4 answers

Javascript: How to get the time difference between window.requestAnimationFrame

What is the best way to get the time difference between "window.requestAnimationFrame" callback in javascript? I have tried: // create the best .requestAnimationFrame callback for each browser window.FPS = (function() { return…
marirena
  • 300
  • 2
  • 10
11
votes
2 answers

Request animation frame called constantly

Trying to understand RequestAnimationFrame and how it works internally. Browser has a main thread which is an event loop. The event loop can be populated with various asynchronous events like user interaction, timers getting fired, network calls…
Prashant
  • 7,340
  • 2
  • 25
  • 24
11
votes
2 answers

Adding additional arguments to a function called back by requestAnimationFrame

I am looking to create a function that scrolls an image element x pixels over y time on an HTML5 canvas, using requestAnimationFrame and delta time. What I can't figure out is how to add more arguments to my function, when requestAnimationFrame…
Danneh
  • 201
  • 4
  • 10
10
votes
1 answer

Is it a good idea to use requestAnimationFrame within a debounce function?

This is a check on my understanding of requestAnimationFrame. I have a need for a debounce function, as I'm doing some DOM interaction every time the window is resized and I don't want to overload the browser. A typical debounce function will only…
carpeliam
  • 6,691
  • 2
  • 38
  • 42
1 2
3
53 54