Different animation speed on different monitor refresh rates

[Random90]

Hi,
now we have many monitors with many refresh rates going up to 144hz and beyond.
I've made some icons and the animations on them runs faster on 144hz monitor than on 60hz.|
Will it be possible to limit FPS by skipping frames if there are more than desired value e.g 60?

It could be done like this:
https://codepen.io/rishabhp/pen/XKpBQX

Desired fps could be provided in vivus object options.

[maxwellito]

Sorry about the late reply. I wanted to provide a solution didn't got time in front of my personal computer to research. Out of the box Vivus won't calculate the refresh rate to adapt the speed of the animation. I actually didn't know that screens could affect the rendering frequency of Chrome (it now makes sense). From what I remember I provided a solution long time ago about hacking Vivus to use a duration in ms instead of frames, but not sure this solution still works. For now if you use the library for simple animations maybe vivus-instant can help you. It will generate the animations in CSS using milliseconds. Ill hope to get some time this weekend to help you on this.

[Random90]

It is not actually dealbreaking for me right now, it just would be a nice to have feature.
I could look into this myself and try to make a PR after I finish with the project I'm currently working now.

BTW,
There's one thing about solution i've found above - requestAnimationFrame is suspended if window is not focused, resulting in wrong FPS count. This probably could be resolved by restarting timer on window focus or stopping calculation on window blur.

[maxwellito]

After putting my hands into it, it's something I should consider for a major version. This feature cannot be added in the actual state because the animation unit is frame which got absolutely no link with time. To build this correctly I should ask the duration of the animation in ms, this would force me to make the animation mapping in percentages instead of frames. So regardless of the refresh rate or computer speed, it should be the exact same duration. Might loose in fluidity for low devices tho.

It's time to take my responsibilities, and start a tag for the 1.0 beta (five years later)

[Random90]

To address possible losing in fluidity, allowing locking at specific frames per second could still be a good idea e.g locking at 30 fps for mobile devices or older browsers. Or lowering fps to 30 by vivus automagicly if client struggle to keep 60.

[davideperozzi]

@maxwellito A fps lock would be nice after migrating to time based animations. To drop off some potential entry points here (regarding the fps lock):

PixiJS has a nice way of dealing with this problem here:
https://pixijs.download/dev/docs/packages_ticker_src_Ticker.js.html#line15

I used a similar technique for a personal project here. Maybe this could help you too :)
https://github.com/davideperozzi/smoovy/tree/master/packages/ticker

[groenroos]

Any update on this? I'm trying to synchronise a Vivus animation with other CSS based animations, and it's difficult to do if the duration of the Vivus animation depends on device Hz.