# Looping animation has a gap ( pauses each loop )

**URL:** <https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336>\
**Category:** Questions\
**Tags:** animation\
**Created:** [February 22, 2023, 4:09pm UTC](https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336 "2023-02-22T16:09:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luck](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luck/32/34042_2.png) [@Luck](https://discourse.threejs.org/u/Luck)\
**Post date:** [February 22, 2023, 4:09pm UTC](https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336/1 "2023-02-22T16:09:17Z")

</div>

I am importing 3d model with two animations from 3ds max. Both animations are on the timeline, one is frame 10-100, second 110-140. Importing and loading both animations with fbx loader works well. The issue comes with looping these animations.

The first animation has very slight pause when looping, the second one has much longer few seconds long pause. So what I am thinking is that the pause is probably caused by the offset from start of the animation from zero frame. Ie first animation has small pause, because it starts 10 frames from zero, second one has much longer pause, because it is 110 frames from zero.

But I don’t know how to solve this. I can’t realy change it in 3ds max, I can move the first animation to zero, but the second animation will always have to be somewhere further on the timeline. Also I am setting the ranges correctly in the 3ds max exporter. Is there some way to clean this up in threejs, so that threejs is using only the correct frames for the animation? It seems that threejs is somehow keeping the previous frame from zero ( altho it ignores what is in them )

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 22, 2023, 4:16pm UTC](https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336/2 "2023-02-22T16:16:52Z")

</div>

if your animation does indeed contains some time period that looks like a pause, then you can try using [AnimationUtils.subclip](https://threejs.org/docs/#api/en/animation/AnimationUtils.subclip)

Example : [Threejs AnimationUtils Subclip - JSFiddle - Code Playground](https://jsfiddle.net/seanwasere/z43Ldem7/)

---

<div class="post-metadata">

**Author:** ![Luck](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luck/32/34042_2.png) [@Luck](https://discourse.threejs.org/u/Luck)\
**Post date:** [February 22, 2023, 4:25pm UTC](https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336/3 "2023-02-22T16:25:21Z")

</div>

Thanks, that worked. I am just wondering, do you know why the values for start and end frame has no effect?

> const flyAnim = object.animations[1];  
> const flyAnimTrim = THREE.AnimationUtils.subclip(flyAnim, ‘fly’, 110, 140);  
> const action = mixer.clipAction(flyAnimTrim);  
> action.play();

This works well and animations plays without any pause, but so does this now. It’s not a problem, just a bit confusing

> const flyAnimTrim = THREE.AnimationUtils.subclip(flyAnim, ‘fly’, 80, 200);

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 22, 2023, 4:33pm UTC](https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336/4 "2023-02-22T16:33:35Z")

</div>

I don’t know why it has no effect for you without seeing a working example of your code.  
It works for me when I change the value in my demo.

From

`const trimmedAction = THREE.AnimationUtils.subclip(walkAction, 'trimmedWalk', 0, 29);`

to

`const trimmedAction = THREE.AnimationUtils.subclip(walkAction, 'trimmedWalk', 20, 23);`

(it is a shorter loop)

---

<div class="post-metadata">

**Author:** ![Luck](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luck/32/34042_2.png) [@Luck](https://discourse.threejs.org/u/Luck)\
**Post date:** [February 22, 2023, 4:49pm UTC](https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336/5 "2023-02-22T16:49:05Z")

</div>

I did test it on both animations and first one gets affected by the frame start and end and the second animation ignores it. Just thought I will mention it, it works perfectly fine otherwise. Thanks.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 22, 2023, 6:25pm UTC](https://discourse.threejs.org/t/looping-animation-has-a-gap-pauses-each-loop/48336/6 "2023-02-22T18:25:11Z")

</div>

Are you using multiple mixers?

Check how you are updating your mixers.

When people use multiple mixers, they sometimes pass in a very low number to the second/third mixer.

i.e.,

```javascript
mixer1.update(clock.getDelta())
mixer2.update(clock.getDelta()) //this is a very, very, very low number

```

It is better to use

```javascript
delta = clock.getDelta()
mixer1.update(delta)
mixer2.update(delta)

```