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

requestAnimationFrame: Explanation of returning a Framerate

So I found this helpful piece of code and used it to provide an instantaneous framerate of some animation I have created. I was hoping someone could help me understand how it functions? Here is my code:
Tro
  • 93
  • 9
4
votes
3 answers

Why does chromecast take so long between animation frames

I have a game I'm developing, that runs quite smoothly on chrome on my Mac, but very slowly on my chromecast. I've optimized the JS quite a bit already. I assumed it was just the low powered hardware in the chromecast, combined with the slowish…
Andrew Mackenzie
  • 5,477
  • 5
  • 48
  • 70
4
votes
3 answers

get a smooth animation for a canvas game

How to get a better animation, dinamically, even when browser is busy or idle, for different devices which have different hardware capacity. I have tried many ways and still cannot find the right way to make the game to display a better…
user971637
4
votes
4 answers

How to control animation speed (requestAnimationFrame)?

I change the text color with requestAnimationFrame(animate); function: requestAnimationFrame(animate); function animate(time){ ... // change text color here if (offset_s < offset_e) {requestAnimationFrame(animate);} } offset_s and offset_s…
LA_
  • 19,823
  • 58
  • 172
  • 308
4
votes
1 answer

Using $$rAF in angular app

I'm creating a directive that animates a sequence of images (allowing to play, stop, and step). In order to get the best performance, I would like to utilize requestAnimationFrame. I noticed that there is a requestAnimationFrame service in the…
cgat
  • 3,689
  • 4
  • 24
  • 38
4
votes
1 answer

requestAnimationFrame not working in Safari/Opera. Tearing my hair out

I have a problem to which I have no answer for and needing an extra pair of eyes to shed some light on the situation, so here it goes: In Chrome and FF, my little animation works fine (4 circles are being drawn at the same time when a user hovers…
Tim Johnstone
  • 353
  • 3
  • 12
  • 26
4
votes
2 answers

Cancelling requestAnimationFrame after set amount of time

I have the following JavaScript: function animate() { // call other function offset += 3; if (offset > 15) offset = 0; /// make the animation loop loop var request = requestAnimationFrame(animate); } And then in my HTML:
4
votes
2 answers

how to replace setInterval by requestAnimationFrame

Here is my situation, I need to speed up the function running time, so setInterval is not a wise choose, right? Since it will cost at least 4ms for each time. So, may I change setInterval function to requestAnimationFrame, but I don't quite…
Kimmi
  • 591
  • 2
  • 7
  • 22
4
votes
5 answers

Grass like smoothing animation on beziercurve?

This is what I am trying to achieve--GRASS Animation(Desired animation) This is where the project is standing currently --My hair animation This is a more structurised code of the above code --My hair animation(by markE)--markE`s code of hair…
HIRA THAKUR
  • 17,189
  • 14
  • 56
  • 87
4
votes
1 answer

requestAnimationFrame flickering issue in Firefox

I am trying to animate a circle across the canvas in diagonal direction. I am using requestanimationframe. It works smoothly in all browsers but not in firefox. There is constant flickering while the animation is going on. Please someone tell me…
user1655003
  • 65
  • 1
  • 3
4
votes
1 answer

DOM element visiility and requestAnimationFrame

I was reading an article on HTML5Rocks that gave an example about scrolling through a webpage and checking an array of DOM elements offsetTop's to see if they should be visible. The article says the best practice way of doing this would be to…
Anthony Hastings
  • 242
  • 2
  • 13
3
votes
2 answers

RequestAnimationFrame call time changes depending on my canvas size

On my application, I have a canvas which CSS size (CSS, not html) updates depending on the window size. I have a main gameplayLoop which looks like this : run = function(){ console.log(timerDiff(frameTime)); game.inputManage(); …
nialna2
  • 2,056
  • 2
  • 25
  • 33
3
votes
1 answer

How to create a smooth animation that eases toward the target

How can I create a smooth animation that eases in toward a target as it changes position? As this jsFiddle shows, the animation stops or gets blocked during moveTarget() instead of continuing toward the new target coordinates. What would be the…
Danny Garcia
  • 831
  • 2
  • 8
  • 24
3
votes
5 answers

calling a Javascript anonymous function right when it's declared, doesn't work, calling it later does

[answered] I'm testing my browser's fps for an html5 game. I have this code: var requestAnimationFrame = ( function() { return window.requestAnimationFrame || //Chromium window.webkitRequestAnimationFrame || //Webkit …
Petruza
  • 11,744
  • 25
  • 84
  • 136
3
votes
1 answer

Better animation method than requestAnimationFrame for JavaScript?

Everywhere I see the advice to use requestAnimationFrame. What nobody tells you is that Chrome will throttle to 48 or 30fps based on your power plan, how many tabs you have open, and the phase of the moon, without notifying you in any way. It will…
std''OrgnlDave
  • 3,912
  • 1
  • 25
  • 34