# Animated website model is moving too fast on 120hz 166hz monitors

**URL:** <https://discourse.threejs.org/t/animated-website-model-is-moving-too-fast-on-120hz-166hz-monitors/62795>\
**Category:** Questions\
**Tags:** fps, speed, animation\
**Created:** [March 14, 2024, 3:14pm UTC](https://discourse.threejs.org/t/animated-website-model-is-moving-too-fast-on-120hz-166hz-monitors/62795 "2024-03-14T15:14:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jjj](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jjj/32/45716_2.png) [@jjj](https://discourse.threejs.org/u/jjj)\
**Post date:** [March 14, 2024, 3:14pm UTC](https://discourse.threejs.org/t/animated-website-model-is-moving-too-fast-on-120hz-166hz-monitors/62795/1 "2024-03-14T15:14:30Z")

</div>

**I need to be moving with same speed 60 fps for example on all moniors**

In this I can change speed by changing number 90 to 60, but it just slows down animation and still in big hz monitors it is super fast

const fixedTimeStep = 1 / 90;  
function animate() {  
requestAnimationFrame(animate);  
const currentTime = Date.now();  
const elapsedMilliseconds = currentTime - lastTime;  
const elapsedSeconds = elapsedMilliseconds / 1000;

if (mixer) {  
mixer.update(fixedTimeStep); // Use the fixed time step  
}

frameCount++;

if (elapsedMilliseconds \>= 1000) {  
const fps = (frameCount / elapsedMilliseconds) \* 1000;  
fpsCounter.innerHTML = `FPS: ${fps.toFixed(2)}`;  
frameCount = 0;  
lastTime = currentTime;  
}

**in this code it is changing speed by changing 0.13 but same problem**

function animate() {  
requestAnimationFrame(animate);  
if (mixer) {  
mixer.update(0.014);  
}  
frameCount++;  
const currentTime = Date.now();  
const elapsedMilliseconds = currentTime - lastTime;

```
if (elapsedMilliseconds >= 1000) {
  const fps = (frameCount / elapsedMilliseconds) * 1000;
  fpsCounter.innerHTML = `FPS: ${fps.toFixed(2)}`;
  frameCount = 0;
  lastTime = currentTime;
}

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 14, 2024, 3:21pm UTC](https://discourse.threejs.org/t/animated-website-model-is-moving-too-fast-on-120hz-166hz-monitors/62795/2 "2024-03-14T15:21:24Z")

</div>

> [@jjj](#):
>
> I need to be moving with same speed 60 fps for example on all moniors

You should have two loops - multiplying things by fixed timestep scalars is not a viable option in a long term. All you need in basically just:

```js
// NOTE Runs logic like calculations, transformations etc. 60 times per second
setTimeout(() => onLogicStep(), 1000 / 60);

// NOTE Adjusts objects on the scene to the last available logic step and renders to the screen
requestAnimationFrame(() => onRenderStep());

```

Don’t use `requestAnimationFrame` for logic loops since (a) it’s framerate dependent, (b) it stop whenever user minimises the browser or changes the tab.

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [March 14, 2024, 3:32pm UTC](https://discourse.threejs.org/t/animated-website-model-is-moving-too-fast-on-120hz-166hz-monitors/62795/3 "2024-03-14T15:32:35Z")

</div>

If you want it to move at the same speed regardless of FPS you just need to change to:

`mixer.update(elapsedSecondsSinceLastFrame)`

where `elapsedSecondsSinceLastFrame` is calculated the same way as `elapsedSeconds`, but you update `lastTime` every frame.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [March 14, 2024, 11:22pm UTC](https://discourse.threejs.org/t/animated-website-model-is-moving-too-fast-on-120hz-166hz-monitors/62795/4 "2024-03-14T23:22:32Z")

</div>

That approach works, but framelocks to 60fps.

I slightly better approach is to use Clock.getDeltaT or deltaT from the time passed into the animate callback, and move things by that amount… this gives you smooth motion but is less deterministic in how things update and some calculations like friction get trickier.

But an even better approach imo, is to use your fixed step approach, but then interpolate position and quaternion at render time, based on the time between the previous and current 60fps keyframes. That way you still only have to update your sim at 60fps but you can get smoother motion on higher refresh rate displays. You have to offset your rendertime by -(1/60) so you’re sim is 1 frame behind, but that gives you the 2 frames to tween between. Once you have that system, you can get away with surprisingly chunky physics update and still have it look and feel decent… like 16fps or lower… or even 10fps… which can then sometimes match your network tickrate… so then it makes it a little conceptually easier to do lockstep networking.