I think the timestamp argument passed by requestAnimationFrame is computed wrongly (tested in Chrome and Firefox). In the snippet below, I have a loop which takes approx. 300ms (you may have to twe...

My rust program is managing memory for a 2d html canvas context, and I'm trying to hit ~60fps. I can calculate the delta between each frame easily, and it turns out to be roughly ~5ms. I'm unclear...

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 c...

I am trying to capture each frame number of the video however it looks like there is no way of achieving it. So I started my own clock to match the frame numbers of the video but they never match a...

If I’m doing multiple animations, is it OK performance-wise to add multiple requestAnimationFrame callbacks? F.ex: function anim1() { // animate element 1 } function anim2() { // animate elemen...

I need to observe a DOM element position as I need to show a popup panel relative to it (but not in the same container) and the panel should follow the element. How I should implement such logic? ...

I am learning to code in JavaScript. I am programming something with some timed mouse animation. I'm just about to add some code which draws the mouse path. It's going to be something that takes t...

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 loggi...

What I want to achieve is to detect the precise time of when a certain change appeared on the screen (primarily with Google Chrome). For example I show an item using $("xelement").show();...

For HTML5 games,with canvas animation for mobile devices. I'm facing some performance issues which differ the speed between each device and the others. requestAnimationFrame speed the animation o...

I'm trying to understand the nuances of using something like a game loop inside of React (version 16+). I'm confused as to how React's rendering strategy conflicts (or doesn't conflict) with anothe...

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...

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 ...

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 usi...

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 argum...

In the mozilla docs on performance best practices for front-end engineers it's recommended to combine setTimeout with requestAnimationFrame to run something immediately after a repaint: requestAni...

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(c...

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 ...

As we know, it's often advised to debounce scroll listeners so that UX is better when the user is scrolling. However, I've often found libraries and articles where influential people like Paul Lew...

While watching Google IO17, I learnt about the double requestAnimationFrame method but i can't really wrap my head around it maybe because i hardly involve myself in animation on the web. However,...

Having discovered requestAnimationFrame just a moment ago, I have dived into all the information I could find about it. To name just a few of the resources I came across in case there are others lo...

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 thi...

Edit: I've reported this as a Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=668257 I'm creating a little canvas game in JS with enemies that can shoot. For testing, I created...

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('c...

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 use...