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

Why I need 2 requestAnimationFrame invokes to wait the dom rendered

I'm trying to locate which element newly rendered is under mouse pointer. (*) Here is my code: btn.addEventListener('click', function () { btn.remove(); for (let i = 0; i < 10; i++) { …
tsh
  • 4,263
  • 5
  • 28
  • 47
4
votes
1 answer

Cancelling requestAnimationRequest in a React component using hooks doesn't work

I am working on a progress bar (Eventually..) and I want to stop the animation (calling cancelAnimationRequest) when reaching a certain value (10, 100, ..., N) and reset it to 0. However, with my current code, it resets to 0 but keeps running…
4
votes
2 answers

Why is requestAnimationFrame() running my code at the end of a frame, and not at the start of it?

var y = 0 canvas.height *= 5 ctx.fillStyle = 'green' function update () { requestAnimationFrame(update) ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.fillRect(0, y, 300, 300) y++ } update() For this simple JSBin…
4
votes
1 answer

Is there a way to see the list of all requested animation frames?

So reading through the MDN docs on requestAnimationFrame and I see that when you fire the function you are returned an integer ID for the entry and that you can use that ID to later cancel the request similar to intervals and timeouts. I also know…
Chris Schmitz
  • 20,160
  • 30
  • 81
  • 137
4
votes
1 answer

Apply two different CSS transforms simultanesouly

I am working on a script to adjust an image using transform left and right based on the cursor position. There is also some CSS to zoom the image on hover. // JavaScript source code var catchX = 0, catchY = 0, x = 0, y = 0, …
cmp
  • 420
  • 5
  • 22
4
votes
1 answer

requestanimationframe drawing with for loop issue

I'm working on a tetris game - still - and am trying to use requestAnimationFrame to draw my T piece on the black board. This is the problem. the requestAnimationFrame draws the piece 2 times, then stops drawing even though the for loop is still…
user4586547
4
votes
1 answer

IE performs rendering before requestAnimationFrame

Div in the snippet below shouldn't become green after click, but it does in IE 11 and Edge. Let's take a look at following situation: there is a black div. When it is clicked, we call requestAnimationFrame and change color to green immediately. In…
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
4
votes
1 answer

Why is requestAnimation frame called multiple times for some frames, and not at all for others?

I have a redux app which uses requestAnimationFrame to render a new state on every TICK, however Google Chrome seems to be calling requestAnimationFrame up to 3 times(!!) for some ticks, and not at all for others, leading to janky animations. In…
Nick Sweeting
  • 5,364
  • 5
  • 27
  • 37
4
votes
2 answers

Angular 2, using ngZone.runOutsideAngular with a requestAnimationFrame loop

From what i have read online the Angular team recommends that you should always call requestAnimationFrame() outside of the Angular zone like this: this.ngZone.runOutsideAngular(() => { requestAnimationFrame(timestamp => { let timerStart =…
DevMike
  • 1,630
  • 2
  • 19
  • 33
4
votes
1 answer

Are microtasks guaranteed to fire within the same animation frame where they were queued?

For example, Promises use microtasks, and I verified here that they can be fullfilled before an animation frame is over (in Chrome). I am talking about frames made with requestAnimationFrame. I am wondering what guarantee we have as that microtasks…
trusktr
  • 44,284
  • 53
  • 191
  • 263
4
votes
3 answers

Is there any advantage to using requestAnimationFrame instead of setTimeout for debounce/throttle

I've come across this example on MDN that uses requestAnimationFrame instead of setTimeout: // Reference: http://www.html5rocks.com/en/tutorials/speed/animations/ var last_known_scroll_position = 0; var ticking = false; function…
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
4
votes
1 answer

requestAnimationFrame not waiting for the next frame

Thanks for checking in! So as far as I know (it may be wrong) JavaScript's requestAnimationFrame method works (a little bit) like setTimeout except it doesn't wait for a certain amount of time but for the next frame to be rendered. This can be used…
4
votes
1 answer

How to test requestAnimationFrame with jasmine(2.4) testing?

I am new in jasmine testing and I have searched the test case example for requestAnimationFrame in jasmine document, but I couldn't find it. I found this plugin to create mock requestAnimationFrame, but I need to use jasmine inbuilt option to test…
Yahwe Raj
  • 1,947
  • 5
  • 25
  • 37
4
votes
1 answer

How to stop/cancel requestAnimFrame() in Fabric.js

I am trying to add video into Fabric.js, And i'm done with that. But one question : How to stop or cancel requestAnimFrame() ? Example : var canvas = new fabric.Canvas('c'); var videoEl = document.getElementById('video'); var video = new…
l2aelba
  • 21,591
  • 22
  • 102
  • 138
4
votes
1 answer

FastDOM - Read / write every 17ms?

FastDOM - a small library that batches DOM reads & writes into raf (requestAnimationFrames). https://github.com/wilsonpage/fastdom I have read the code, however, I am struggling to understand how it works. Here are a few presumptions we have: -…
Kayote
  • 14,579
  • 25
  • 85
  • 144