# Animations looks different and wrong when I play them on three js
**URL:** https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410
**Category:** Questions
**Tags:** animation
**Created:** [August 27, 2023, 5:31pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410 "2023-08-27T17:31:12Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Raphael\_Dev](https://discourse.threejs.org/u/Raphael_Dev)
#### Post date: [August 27, 2023, 5:31pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/1 "2023-08-27T17:31:12Z")
I tested the animations in the three js editor, and they look like this:
[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/4/248cbe25769aca3ed5ab660b6c74cad6d578456b.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/4/248cbe25769aca3ed5ab660b6c74cad6d578456b.mp4)
While in the game, when I play the animation, it looks like this:
[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/4/b47ee4c9013ed42d679dd7167accd04fc3943cac.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/4/b47ee4c9013ed42d679dd7167accd04fc3943cac.mp4)
What am I doing wrong? And how can I fix it? I’m updating the mixer with clock.getDelta()
---
### Author:  [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [August 27, 2023, 6:07pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/2 "2023-08-27T18:07:26Z")
Incomplete or missing animation may happen if several `clock.getDelta()` are used in a single rendering loop (e.g. there are several characters and each of them is calling `getDelta`). Is this the case?
---
### Author:  [@Raphael\_Dev](https://discourse.threejs.org/u/Raphael_Dev)
#### Post date: [August 27, 2023, 6:47pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/3 "2023-08-27T18:47:13Z")
Yes it is. So making a new delta for each of them would solve it?
---
### Author:  [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [August 27, 2023, 6:53pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/4 "2023-08-27T18:53:29Z")
In a rendering loop `clock.getDelta()` should be called only once. If you have 3 mixers, they should all use the same delta:
```javascript
function animation( )
{
var delta = clock.getDelta( );
:
mixer1.update( delta );
mixer2.update( delta );
mixer3.update( delta );
}
```
---
### Author:  [@Raphael\_Dev](https://discourse.threejs.org/u/Raphael_Dev)
#### Post date: [August 27, 2023, 7:04pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/5 "2023-08-27T19:04:51Z")
I’m doing this. I’m calling clock.getDelta() inside the animation, storing it in the const delta, and using it for every character, like that mixer2.update(delta)…
---
### Author:  [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [August 27, 2023, 7:10pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/6 "2023-08-27T19:10:56Z")
I got the impression that there are several `clock.getDelta()` in the rendering loop. If not, then the problem is something else.
---
### Author:  [@Raphael\_Dev](https://discourse.threejs.org/u/Raphael_Dev)
#### Post date: [August 27, 2023, 7:34pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/7 "2023-08-27T19:34:16Z")
function animate() {
```
const animationId = requestAnimationFrame(animate)
renderer.render(scene, camera)
const delta = clock.getDelta();
```
characters.forEach((character) =\> {
scene.add(character.getModel());
character.updateSides();
character.update(delta);
});
There’s only one, I’m certain.
---
### Author:  [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [August 27, 2023, 7:51pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/8 "2023-08-27T19:51:13Z")
I’m not sure:
- what does the `characters` array contain – if it is mixers, then what is `updateSlides`, if it is not mixers, then where how are the mixers’ updated
- why you add the models to the scene every frame
As it is hard for me to guess so many things, I hope that someone else might be helpful.
---
### Author:  [@Raphael\_Dev](https://discourse.threejs.org/u/Raphael_Dev)
#### Post date: [August 27, 2023, 9:04pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/9 "2023-08-27T21:04:04Z")
characters array contains every character, which is a class, which has the method .update which calls mixer.update(delta). Updatesides is another method, which I use to update every frame the sides of the model, for collision purposes. Why I add the model to the scene every frame is a good question, I don’t know why… maybe I can change this but every other animations work properly, just this for the shooting that is kinda odd… so I don’t know if adding them every scene is the problem… You have any other idea?
---
### Author:  [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [August 28, 2023, 4:22am UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/10 "2023-08-28T04:22:09Z")
No more ideas, besides some approaches, that only someone with access to the code and to the model can try:
- **oh-my-gosh approach** : double check whether there is no accidental (or on purpose) mangling with the animation, like manually setting the animation time, trimming the animation clip, resetting/restarting the animation prematurely, etc.
- **compatibility approach** : run the project (game?) on different browsers and different computers to see whether it behaves the same, sometimes some features do not work equally well on different systems
- **proxy approach** : replace the character and its animation with another character with animation (for example one from the official Three.js examples). If the problem persists, then it is something in your code that makes the problem
- **bottom-up approach** : create a new small program that only loads and animates this character. If it is working well, then this indicates there is something in your big project that makes the problem. If not, then either the animation in the character has some problem, or the smaller program has a bug.
- **top-down approach** : make a copy of the whole project and start removing parts. Check whether the issue persists after removing each part. For example, first remove all other characters with animations, then other static objects and so on.
---
### Author:  [@Raphael\_Dev](https://discourse.threejs.org/u/Raphael_Dev)
#### Post date: [August 28, 2023, 3:21pm UTC](https://discourse.threejs.org/t/animations-looks-different-and-wrong-when-i-play-them-on-three-js/55410/11 "2023-08-28T15:21:42Z")
Hey man, thank you really for the help. The issue was that I was playing the animation while still playing the animation to stand still, so they end up being bugged. Really glad that you helped me. About that magic ray rotation, still a no go. But thanks for the help there too \<3