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

requestAnimationFrame detect stop

I've noticed that whenever I dock the browser window or switch tabs requestAnimationFrame stops being called (which I expect to happen). Is there a way to detect when this stop occurs? Reason is, that I have a timer running in my game. I want to…
ChrisRich
  • 8,300
  • 11
  • 48
  • 67
8
votes
3 answers

Questions about Request Animation Frame

I'm trying to build a parallax site, which will move few elements while scrolling the site. But instead of using a scroll event listener I'm using requestAnimationFrame, after reading this post by Paul Irish, and this video which said that scroll…
Zendy
  • 1,664
  • 1
  • 17
  • 24
7
votes
1 answer

Is wanting to control the FPS of my animation a good reason to continue using setTimeout in stead of requestAnimationFrame?

I'm wondering if I should switch my game over to requestAnimationFrame. If there even is still a reason to do so anymore, as I've read that setTimeout() now also pauses when you switch tabs in the major browsers. Anyway, say I want to control the…
Jelle De Loecker
  • 20,999
  • 27
  • 100
  • 142
7
votes
1 answer

Using request animation frame in React

I'm reading this article and I'm not sure I understand how the final hook works. Here is the code: const useAnimationFrame = (callback) => { const requestRef = useRef(); const previousTimeRef = useRef(); const animate = (time) => { if…
whitecircle
  • 237
  • 9
  • 34
7
votes
2 answers

requestAnimationFrame is not defined it Next.js with React Native Web (Animated module)

I'm working on Next.js and React-Native-Web. I managed to run them together following the official Next.js example but when I'm trying to use the Animated package from the react-native it fails with Error that the requestAnimationFrame isn't…
7
votes
1 answer

Turning requestAnimationFrame into an Event t ()

Using Reflex-DOM, I'd like to make an Event t () that fires when the browser is ready to paint the next frame, i.e. when requestAnimationFrame fires. I tried it like this: {-# LANGUAGE RecursiveDo, TypeFamilies #-} import Reflex.Dom import…
Cactus
  • 27,075
  • 9
  • 69
  • 149
7
votes
1 answer

Move object along spline(circle) in Three.js

I'm pretty new to Three.js (1 day experience lol) I want to create a model of Solar system so I got planets that should move along their trajectories (circles). function render() { requestAnimationFrame(render); sun.rotation.y += 0.01; …
Alex Pyzhianov
  • 520
  • 1
  • 4
  • 12
7
votes
1 answer

What can cause requestAnimationFrame to drop frames in an efficient webgl loop?

I have been programming a javascript demo/test to learn WebGL. I have a fairly efficient game loop structure that (according to Chrome Dev Tools) only takes 1-2 milliseconds to run. I am using requestAnimationFrame to schedule the running of the…
7
votes
1 answer

requestAnimationFrame is passing unexpected parameters in IE10

So I've been a good net citizen, using feature detection to see whether the browser supports requestAnimationFrame and only fall back to a setTimeout-based solution otherwise (something around the lines of Paul Irish's famous post). var NOW =…
balpha
  • 50,022
  • 18
  • 110
  • 131
7
votes
3 answers

change css on scroll event w/ requestAnimation Frame

I want to change the background color of in-viewport elements (using overflow: scroll) So here was my first attempt: http://jsfiddle.net/2YeZG/ As you see, there is a brief flicker of the previous color before the new color is painted. Others have…
jedierikb
  • 12,752
  • 22
  • 95
  • 166
6
votes
0 answers

What part of the HTML specification prevents 120 Hz iPad Pro from doing 120fps browser animations?

I just ran MrDoob's FPS counter on Safari in a new Apple's iPad Pro (120Hz) but it only runs at 60fps, whereas a Chrome browser in a desktop monitor (with a refresh rate of 144Hz) runs up to 144fps. The script uses requestAnimationFrame to calculate…
Tom Roggero
  • 5,777
  • 1
  • 32
  • 39
6
votes
3 answers

Shall the requestAnimationFrame calls always be throttled down to 60 FPS?

requestAnimationFrame is called whenever the screen is ready for a repaint. On modern screens the refresh rate may be a lot higher then 60 frames per second. If there is a lot of stuff going on inside those calls - it may impact the overall…
YemSalat
  • 19,986
  • 13
  • 44
  • 51
6
votes
1 answer

Using setInterval with requestAnimationFrame

I'd like to use setInterval for actual steps in a program and requestAnimationFrame for rendering. I was under the impression this would be the perfect mix: rendering speed would not slow down actual progression, so dips in frame rate would only…
user1948076
6
votes
3 answers

requestAnimationFrame scope change to window

I have a chain of objects that looks like this: Game.world.update() I would like to use requestAnimationFrame to determine the framerate of this function. However when I implement it like this: World.prototype.update = function() { …
mipmap
  • 221
  • 1
  • 13
6
votes
2 answers

requestAnimationFrame for begining a CSS transition

Does it make sense to request an animation frame for beginning a CSS transition? For example, the Mozilla CSS transitions page includes a link to this jsfiddle example: CSS: #foo{ border-radius:50px; width:50px; height:50px; …
erilem
  • 2,634
  • 21
  • 21