# Replaying an animation, increases its speed

**URL:** <https://discourse.threejs.org/t/replaying-an-animation-increases-its-speed/64229>\
**Category:** Questions\
**Tags:** angular, speed, animation\
**Created:** [April 17, 2024, 6:01pm UTC](https://discourse.threejs.org/t/replaying-an-animation-increases-its-speed/64229 "2024-04-17T18:01:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![user8493](https://avatars.discourse-cdn.com/v4/letter/u/cdc98d/32.png) [@user8493](https://discourse.threejs.org/u/user8493)\
**Post date:** [April 17, 2024, 6:01pm UTC](https://discourse.threejs.org/t/replaying-an-animation-increases-its-speed/64229/1 "2024-04-17T18:01:16Z")

</div>

I have a mixamo character that can play 3 different animations. I have used 3 buttons to select which animation to be played. Using LoopOnce, the animation is played only one time, and when it is finished, it goes to Idle mood. Every thing is working as expected, except, when I replay animations, their speed increases, and the more I replay them, the higher their speed becomes. Does anyone have any idea what is wrong? Thank you in advance

Here is my code:

```javascript
 this.fbxLoader.load('assets/fbx/sample.fbx',
   (object) => {
       (object as THREE.Object3D).animations[0].tracks.shift();
       const animationAction = this.mixer.clipAction(
           (object as THREE.Object3D).animations[0]
       );
       animationAction.setLoop(THREE.LoopOnce, 1);
       animationAction.clampWhenFinished = true;
       this.animationActions.push(animationAction);
       this.modelReady = true;
       /// in the same way 3 other models are loaded hereafter
  },
  (xhr) => {
      console.log('xhr is ', (xhr.loaded / xhr.total) * 100 + '% loaded');
  },
  (error) => {
      console.error("Error loading fbx file: ", error);
  }
 )

   const setAction = (selectedAnimation: number) => {
      if (this.activeAction) {
          this.activeAction.stop();
      }
      let toDoAction = this.animationActions[selectedAnimation];
      if (toDoAction) {
          console.log("Action is changed")
          this.activeAction = toDoAction;
          this.activeAction.setDuration(20); // only the first time works, afterwards, it is every time faster
          this.activeAction.reset().play();
       }
   }

   setAction(selectedAnimation);

   const animate = () => {
      requestAnimationFrame(animate);
      if (this.modelReady) {
         this.mixer.update(clock.getDelta());
      }
      renderer.render(this.scene, this.camera);
   }
   animate()

   if (this.modelReady) {
        this.mixer.addEventListener( 'finished', (e) => {
        if (this.activeAction) {
            this.activeAction.reset().stop();
        }
        let idleAction = this.animationActions[0];
        this.activeAction = idleAction;
        this.activeAction.setDuration(20);
        this.activeAction.reset().play();
        console.log('Action is finished');
    } );
  }

```

---

<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:** [April 17, 2024, 9:20pm UTC](https://discourse.threejs.org/t/replaying-an-animation-increases-its-speed/64229/2 "2024-04-17T21:20:34Z")

</div>

Check the values you’re passing to mixer update - and how many times you’re calling it per frame (just put a console log somewhere around it.)

---

<div class="post-metadata">

**Author:** ![user8493](https://avatars.discourse-cdn.com/v4/letter/u/cdc98d/32.png) [@user8493](https://discourse.threejs.org/u/user8493)\
**Post date:** [April 18, 2024, 7:05am UTC](https://discourse.threejs.org/t/replaying-an-animation-increases-its-speed/64229/3 "2024-04-18T07:05:10Z")

</div>

I’ve added `console.log('clock.getDelta: ', clock.getDelta())` before `this.mixer.update(clock.getDelta());`, I get many logs (maybe 10 per second), they are mostly like:  
.  
.  
.  
clock.getDelta: 0.015  
clock.getDelta: 0.016  
clock.getDelta: 0.017  
clock.getDelta: 0.014  
clock.getDelta: 0.018  
clock.getDelta: 0.015  
.  
.  
.  
`  
The log also slows the code noticeably.

---

<div class="post-metadata">

**Author:** ![user8493](https://avatars.discourse-cdn.com/v4/letter/u/cdc98d/32.png) [@user8493](https://discourse.threejs.org/u/user8493)\
**Post date:** [April 19, 2024, 1:58pm UTC](https://discourse.threejs.org/t/replaying-an-animation-increases-its-speed/64229/4 "2024-04-19T13:58:40Z")

</div>

I’ve found a workaround to artificially control the speed of the animation. I count the number of times each animation has been played and increase the action.setDuration() accordingly.