# Using requestAnimationFrame to create a fixed-speed animation

**URL:** <https://forum.kirupa.com/t/using-requestanimationframe-to-create-a-fixed-speed-animation/636190>\
**Category:** web dev\
**Created:** [March 18, 2017, 9:10pm UTC](https://forum.kirupa.com/t/using-requestanimationframe-to-create-a-fixed-speed-animation/636190 "2017-03-18T21:10:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shashwat](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shashwat/32/8053_2.png) [@shashwat](https://forum.kirupa.com/u/shashwat)\
**Post date:** [March 18, 2017, 9:10pm UTC](https://forum.kirupa.com/t/using-requestanimationframe-to-create-a-fixed-speed-animation/636190/1 "2017-03-18T21:10:20Z")

</div>

Wouldn’t animations on a 30fps screen be half as slow than on a screen with 60fps? What if you don’t want your animation to be just frame by frame, but there’s a time factor to it?  
For example, I want a car moving at a fixed speed across the screen. Without any extra inputs like ‘time passed since’, how would you attempt to do this using `requestAnimationFrame`?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 19, 2017, 11:24am UTC](https://forum.kirupa.com/t/using-requestanimationframe-to-create-a-fixed-speed-animation/636190/2 "2017-03-19T11:24:35Z")

</div>

Hmm, if you don’t want to use the ‘time passed since’ input `requestAnimationFrame` gives you (which is actually a timestamp from which you would have to get the difference yourself), I’m not sure if there’s a good way to do it. Since there is no guarantee as to the timing of `requestAnimationFrame` you can’t make assumptions about the timing of the animation. You might have better luck with `setInterval`, since that is time-based, but even then, the timing isn’t guaranteed (both being throttled when in background tabs).

You’re better off just using the timestamp. [https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#Notes](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#Notes)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 19, 2017, 6:49pm UTC](https://forum.kirupa.com/t/using-requestanimationframe-to-create-a-fixed-speed-animation/636190/3 "2017-03-19T18:49:21Z")

</div>

The other issue about raF that I ran into recently is that some monitors refresh at 120hz (and thus call raF 120 times a second). I’ll need to revise some of the content I’ve written to account for some of these differences.