# Morph targets keyframes?

**URL:** <https://discourse.threejs.org/t/morph-targets-keyframes/1896>\
**Category:** Questions\
**Tags:** morph-targets, animation\
**Created:** [February 21, 2018, 2:58pm UTC](https://discourse.threejs.org/t/morph-targets-keyframes/1896 "2018-02-21T14:58:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![may](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@may](https://discourse.threejs.org/u/may)\
**Post date:** [February 21, 2018, 2:58pm UTC](https://discourse.threejs.org/t/morph-targets-keyframes/1896/1 "2018-02-21T14:58:58Z")

</div>

Hello,

I need to use morph targets combined with user interaction. I have looked at the theree.js examples of morph targets usage but I’m still confused. I must note that I’m using gltf loader for my project. I have two main interactions I’m struggling with but the origin of the problem, in my opinion, is the same: is it possible to keyframe morph targets animation?

First interaction: On mouse down activate the animation. The first morph target should start first, and then 5 frames after that the second one should follow. They should play at the same time with 5 frames difference. Now they just play simultaneously. [Morph targets - hold](https://m-a-y.github.io/threejs-tests/examples/hold-morph/)

Second interaction: On click of the button the target should morph from one to another fluidly. Now click works but I want to add a 5 frame transition from one morph target to another. [three.js webgl - morph targets - horse](https://m-a-y.github.io/threejs-tests/examples/click-morph/)

Just for reference, this is how the individual shapes look like:

 ![morph-targets](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c876c0c801c5605d279cd582d4ba014e23e31597.PNG)

Any help or suggestions will be much appreciated! Thanks 🙂

---

<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:** [February 21, 2018, 8:07pm UTC](https://discourse.threejs.org/t/morph-targets-keyframes/1896/2 "2018-02-21T20:07:31Z")

</div>

> [@may](#):
>
> is it possible to keyframe morph targets animation?

Morph target animation consists of two basic parts. The actual morph targets (sometimes called shape keys) and the corresponding influence values. A single value defines how much influence a particular morph target has on the final shape of the geometry. It is usually between `0` and `1`. Morph target animation is accomplished by animating these influence values.

The following example does this manually:

[https://threejs.org/examples/webgl\_morphtargets\_sphere.html](https://threejs.org/examples/webgl_morphtargets_sphere.html)

This example generates **keyframes** from a morph target sequence and plays the animation via `three.js`’s animation system.

[https://threejs.org/examples/webgl\_morphtargets\_horse.html](https://threejs.org/examples/webgl_morphtargets_horse.html)

---

<div class="post-metadata">

**Author:** ![may](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@may](https://discourse.threejs.org/u/may)\
**Post date:** [February 25, 2018, 9:00pm UTC](https://discourse.threejs.org/t/morph-targets-keyframes/1896/3 "2018-02-25T21:00:27Z")

</div>

Thanks for the reply! 🙂

I am now trying to follow the Morph Target Horse example, however, I have problems making it work for gltf.

The problem is that when I try to use _CreateFromMorphTargetSequence_, the _geometry.morphTargets_ is undefined and the animation won’t play.

I have seen this issue on github [BufferGeometry with morphAttributes does not create mesh with morphTargetInfluences · Issue #11277 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/issues/11277) but since it is fixed, am I doing something wrong in my code?:

```
      var loader = new THREE.GLTFLoader();
      loader.load( '../../../assets/models/sphere.gltf', function ( geometry ) {

        geometry.scene.traverse( function ( node ) {

            if ( node.isMesh ){
                mesh = node;
                mesh.material.morphTargets = true;
            }

        } );

        mesh.scale.set(1,1,1);

        scene.add( mesh );

        mixer = new THREE.AnimationMixer( mesh );

        var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'testmorph', geometry.morphTargets, 25 );
        mixer.clipAction( clip ).setDuration( 1 ).play();

    });

```

I should also say that I have tested my model in the gltfViewer and the morph targets worked as expected, so I’m not sure how to replicate the morph targets that work in the viewer.

---

<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:** [February 26, 2018, 9:46am UTC](https://discourse.threejs.org/t/morph-targets-keyframes/1896/4 "2018-02-26T09:46:16Z")

</div>

The clip is already created by `GLTFLoader`.

```auto
loader.load( '../../../assets/models/sphere.gltf', function ( gltf ) {

   console.log( gltf.animations ); // array of AnimationClips 

} );

```

---

<div class="post-metadata">

**Author:** ![may](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@may](https://discourse.threejs.org/u/may)\
**Post date:** [February 26, 2018, 10:51am UTC](https://discourse.threejs.org/t/morph-targets-keyframes/1896/5 "2018-02-26T10:51:28Z")

</div>

And it worked! Thank you @Mugen87