# GLTFLoader Animations = :-(

**URL:** <https://discourse.threejs.org/t/gltfloader-animations/8454>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [July 10, 2019, 10:01am UTC](https://discourse.threejs.org/t/gltfloader-animations/8454 "2019-07-10T10:01:34Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![POP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pop/32/31182_2.png) [@POP](https://discourse.threejs.org/u/POP)\
**Post date:** [July 10, 2019, 10:01am UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/1 "2019-07-10T10:01:34Z")

</div>

I am attempting to import an animated GLTF model. However, the animation is not fluid (like the original) but rather a stiff rocking motion.

Original

![2019-07-10%2011_53_58](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/64b30cd47b7c717a9f344aa5aa01ca5894621865.gif)

Our result

![2019-07-10%2011_56_11](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/0b982b3fdada4ac891202108d4aec1314e18120e.gif)

CODE

`var mixer;`  
`var clock = new THREE.Clock();`

```
// model
gltfLoader = new THREE.GLTFLoader()
    gltfLoader.load( "shark.gltf", function ( model ) {
    mixer= new THREE.AnimationMixer(model.scene);
    model.animations.forEach((clip) => {mixer.clipAction(clip).play(); });
 scene.add(model.scene)}

// renderer
var delta = clock.getDelta();
mixer.update( delta )
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 10, 2019, 12:31pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/2 "2019-07-10T12:31:03Z")

</div>

> [@POP](#):
>
> model.animations.forEach((clip) =\> {mixer.clipAction(clip).play(); });

Are you sure you want to playback all available animations at once? This could be the root cause for the strange behavior.

---

<div class="post-metadata">

**Author:** ![POP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pop/32/31182_2.png) [@POP](https://discourse.threejs.org/u/POP)\
**Post date:** [July 10, 2019, 12:46pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/3 "2019-07-10T12:46:02Z")

</div>

Playing only one animation yields the same result:

```
var action = mixer.clipAction( model.animations[0] );
action.play();

```

I’m attaching the model (shark.zip)  
Dragging that folder to [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) shows the animation working properly.

[shark.zip](https://discourse.threejs.org/uploads/short-url/eeFwMdw4EEL60aOU7Pm130wfpCU.zip) (2.5 MB)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 10, 2019, 1:18pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/4 "2019-07-10T13:18:31Z")

</div>

Sry, I’m not able to reproduce the issue on my machine. Full code:

```auto
var container, stats, controls, mixer, clock;
var camera, scene, renderer;

init();
animate();

function init() {

	container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
	camera.position.set( - 1.8, 0.9, 2.7 );

	scene = new THREE.Scene();

	clock = new THREE.Clock();

	var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
	scene.add( ambientLight );

	var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
	camera.add( pointLight );
	scene.add( camera );

	var loader = new GLTFLoader().setPath( 'models/gltf/shark/' );
	loader.load( 'shark.gltf', function ( gltf ) {

		mixer = new THREE.AnimationMixer( gltf.scene );
		var action = mixer.clipAction( gltf.animations[0] );
		action.play();

		scene.add( gltf.scene );

	} );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.gammaOutput = true;
	container.appendChild( renderer.domElement );

	controls = new OrbitControls( camera, renderer.domElement );
	controls.target.set( 0, - 0.2, - 0.2 );
	controls.update();

	window.addEventListener( 'resize', onWindowResize, false );

	// stats
	stats = new Stats();
	container.appendChild( stats.dom );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {

	requestAnimationFrame( animate );

	var delta = clock.getDelta();

	if ( mixer ) mixer.update( delta );

	renderer.render( scene, camera );

	stats.update();

}

```

---

<div class="post-metadata">

**Author:** ![POP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pop/32/31182_2.png) [@POP](https://discourse.threejs.org/u/POP)\
**Post date:** [July 10, 2019, 1:49pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/5 "2019-07-10T13:49:28Z")

</div>

Ah, I found the problem.

In a different area of the code, I was setting the name of each child object in the model… removing this line fixed it.

`model.scene.traverse( function ( child ) {child.name=no})`

Thanks @Mugen87

---

<div class="post-metadata">

**Author:** ![LN-hell\_haine](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ln-hell_haine/32/6549_2.png) [@LN-hell\_haine](https://discourse.threejs.org/u/LN-hell_haine)\
**Post date:** [July 31, 2019, 4:47pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/6 "2019-07-31T16:47:00Z")

</div>

Hi, I re-use your code to import my GLTF animation from Blender3D. I just combine translation and rotation on my model and I don’t understand why but my animation generate is diferent from the original.

Below a gif of my original animation :  
 ![coalcoalkernelL](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/23dc8b09da8e2e8ec8aa5db8e1cf7261f5844282.gif)

My GLTF use sometimes scalable information instead of big rotation :  
[charbon.glb](https://discourse.threejs.org/uploads/short-url/3xiuuqOoQkVxTOfZCO0ruHKeiqE.glb) (119.8 KB)

I document me on three.js since yesterday. I’m not sure if it’s the best place to expose my issue and if it’s not the case could you tell me the best place to do it ?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 31, 2019, 5:15pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/7 "2019-07-31T17:15:59Z")

</div>

I’ve tested your model with [Sketchfab](https://sketchfab.com/), [Babylon.js Sandbox](https://sandbox.babylonjs.com/) and the `three.js` based [gltf-viewer](https://gltf-viewer.donmccurdy.com/). They all visualize the asset in the same way. The smaller cubes which appear and disappear are not visible. Maybe you are doing something wrong when exporting the model from Blender? If not, consider to report an issue at the repository of the Blender glTF importer/exporter: [https://github.com/KhronosGroup/glTF-Blender-IO](https://github.com/KhronosGroup/glTF-Blender-IO)

---

<div class="post-metadata">

**Author:** ![LN-hell\_haine](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ln-hell_haine/32/6549_2.png) [@LN-hell\_haine](https://discourse.threejs.org/u/LN-hell_haine)\
**Post date:** [July 31, 2019, 7:23pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/8 "2019-07-31T19:23:10Z")

</div>

Oh, sorry it’s my fault, the smaller cubes are generated particles from an other model inside the principal cube. I don’t include this because particles is’nt supported by glTF-Blender-IO.

![coal](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cafbd7f67669b76db619dae2b4ff5f2f94b8f050.gif)

The issue is about the principal cube, I’ve tested with [Babylon.js Sandbox](https://sandbox.babylonjs.com/) and [glTF viewer](https://gltf-viewer.donmccurdy.com/) too.

- In the first case I don’t have the shape deformations like in my browser but the rotations animation is incomplete.
- In the second case that transformed my translations and rotations animation in shape modifications part like in my browser view.

 ![glTF](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/eb753f75c77724ff47d45a65b5ebbd60c559f051.png) ![Enregistrement%20%231_1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/20937fd2c20d914ebdef170f97e48d2cc226dcaa.gif)

In any case, thank you for these tools and I will take the time to report my issue on github.

---

<div class="post-metadata">

**Author:** ![LeenAlfalah](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/leenalfalah/32/18835_2.png) [@LeenAlfalah](https://discourse.threejs.org/u/LeenAlfalah)\
**Post date:** [March 29, 2022, 9:58am UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/9 "2022-03-29T09:58:48Z")

</div>

> [@Mugen87](#):
>
> Are you sure you want to playback all available animations at once? This could be the root cause for the strange behavior.

how we can play one by one Mr ? @Mugen87  
did ypu know how gltf viewer play animation when i click play all

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4f63921b7af9fa034938f1455eede30f9451e4b5.png)  
?  
cuz it work on viewer but when i play animation in foreach on my code not work, thanks

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [March 29, 2022, 4:39pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/10 "2022-03-29T16:39:20Z")

</div>

This is an old thread – i’d suggest starting a new thread and including your code or a demo so others can help you debug it.

---

<div class="post-metadata">

**Author:** ![jayeomer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayeomer/32/41197_2.png) [@jayeomer](https://discourse.threejs.org/u/jayeomer)\
**Post date:** [September 30, 2022, 9:53pm UTC](https://discourse.threejs.org/t/gltfloader-animations/8454/11 "2022-09-30T21:53:04Z")

</div>

It’s an old thread, but just in case someone needs to know, to start animation one after another you must execute next animation once the current animation finishes

```javascript
mixer = new THREE.AnimationMixer( model );
const clips = model.animations;
var t = 0;
$.each(clips, function(i, clip) {
    setTimeout(function() {
        mixer.clipAction( clip ).play();
    }, t);
    t = t + (clip.duration * 1000);
});

```