Create new Animation using morph targets as a property

I’m trying to create a new animation with morph targets as a property that has a structure like var changePosition = new BABYLON.Animation(“chgePos”, “morph target to move”, frameRate, propertyType, loop_mode); where morph target to move is the morph target’s influence that I want to change inside the animation and is there also any way to access the animation timeline to edit an animation like how it’s done in blender?

You can use MorphTarget as target like a mesh, see docs:

I created a playground to animate MorphTarget’s Influence:

This tool might help to edit animations:


Does the playground to animate morph targets influence also work for 3D models because I’m trying to do this for a 3D model I imported and change the lip positions according at the exact frame their supposed to happen

It does work with imported models, here I found an example:

Maybe you find more in playground search:

Is there any way to make it so that I can get a specific morph target to play at a specific key frame in the timeline and then get another different morph target to play at another key frame in the same timeline. For example I want one of my 3D models morph targets to play at frame 64 and another different morph target to play at frame 122 in the same timeline both morph targets involve the same mesh but their different.

What do you mean by “timeline”? If it’s the timeline on ACE and you want to see the two animations on the same timeline:

You could add the two morph target animations to an Animation Group, then if you access the ACE through the group’s Inspector, then both animations will be shown there:

1 Like

Is there any chance you can show me through a playground because I’m trying to do so programmatically and I’ll need a playground if I’m going to find out how to do that.

Oh, there’s an example in the morph target docs: Morph Targets | Babylon.js Documentation ( - Indeterminate Loading Spinner | Babylon.js Playground ( - if you click on the loadingSpin animation group you can access the ACE there.

In the morph targets playground what is the loaderMat used for?

It’s the Node Material used in the meshes :slight_smile:

I managed to create an animation curve but I’m having trouble accessing the morph targets and making them play at the keyframes specified in the image

What kind of trouble you’re having? Can you share a playground? :slight_smile:


Hmmm I think we’ll need some design work to support editing morph targets on ACE right @PatrickRyan ? We’ll add this as an issue so we can prioritize.

Is your question about editing te morph animation you created by code? Or the opposite (like create an animation in ACE and then use it on a morph)

For the former, you can create a dummy object and set your animation to its animations array. Then you can edit it from the Inspector

I’ve run into another problem whenever I try to click the animation from the animation group to see how it’s set up and if it’s playing I get the error message shown in the picture?

1 Like

I might be wrong, but your line 137 miss 2nd parameter?

keyAction.addTargetedAnimation(morph); // no target-parameter at all

I tried getting rid of it and using
scene.beginDirectAnimation(casiBody, morph, 0, 2 * frameRate, true);
but the animation isn’t playing

@carolhmj, ACE in its current form will support morph target animation as you are only animating a float value and then passing it to the influence parameter on the mesh with a morph target. You can see in this PG that there are morphs in code playing, and you can then open them in ACE and see the curve values. This demo was created long before ACE so I don’t have a version that shows creating the curves in ACE and loading those, but I can certainly make a version of this that does.

@Takemura the only thing I can’t see in your ACE graph is what parameter you are changing. If you click on the gear next to the animation name, you should be setting influence as the parameter to animate:

If you are driving them in code, and you have to create animations on the fly to sync with speech, you will want something to shortcut the process of managing a lot of individual animations. You could use
TransitionTo which would allow you to change the value of the influence and set a duration in milliseconds in one line rather than needing to set up an animation key sequence for each quick animation. I hope this helps.

1 Like

I tried using
var animatable = BABYLON.Animation.TransitionTo(“morphing”, 1.0, casiBody, scene, frameRate, morph, 1357);
but when I did it gave me the error message saying
BJS - [14:49:26]: Unable to load from Error in onSuccess callback logger.ts:101:55