# Create new Animation using morph targets as a property **URL:** \ **Category:** Questions\ **Created:** [September 10, 2022, 4:34am UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814 "2022-09-10T04:34:36Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [September 10, 2022, 4:34am UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/1 "2022-09-10T04:34:36Z")
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? ---
**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\ **Post date:** [September 10, 2022, 2:05pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/2 "2022-09-10T14:05:53Z")
You can use MorphTarget as target like a mesh, see docs: > **[MorphTarget | Babylon.js Documentation](https://doc.babylonjs.com/typedoc/classes/BABYLON.MorphTarget)** > > Defines a target to use with MorphTargetManager \[API\] I created a playground to animate MorphTarget’s Influence: > **[Babylon.js Playground](https://playground.babylonjs.com/#H9QLBX)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes This tool might help to edit animations: > **[ACE - The Animation Curve Editor | Babylon.js Documentation](https://doc.babylonjs.com/toolsAndResources/tools/animationCurveEditor)** > > Learn all about the powerful Animation Curve Editor. ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [September 13, 2022, 12:34am UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/3 "2022-09-13T00:34:27Z")
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 ---
**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\ **Post date:** [September 13, 2022, 10:18am UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/4 "2022-09-13T10:18:40Z")
It does work with imported models, here I found an example: > **[Babylon.js Playground](https://playground.babylonjs.com/#10D6YT%23109)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Maybe you find more in playground search: > **[Playground search page | Babylon.js Documentation](https://doc.babylonjs.com/playground?q=MorphTarget&type=code)** > > Playground earch page for Babylon.js documentation site ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [September 25, 2022, 2:12am UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/5 "2022-09-25T02:12:36Z")
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. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [September 26, 2022, 12:41pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/6 "2022-09-26T12:41:04Z")
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: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/7/d7e55907b30bc0cadc9f083c5edb19001d8b84d9.png) 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: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/3/4383326e9a403b3c5fab39c0f3a8fa1f709a33f5.png) ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [September 28, 2022, 1:05am UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/7 "2022-09-28T01:05:49Z")
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. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [September 28, 2022, 12:44pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/8 "2022-09-28T12:44:43Z")
Oh, there’s an example in the morph target docs: [Morph Targets | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/features/featuresDeepDive/mesh/morphTargets#how-to-access-morph-targets-in-a-gltf-file) - [Indeterminate Loading Spinner | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#9CLJEF) - if you click on the loadingSpin animation group you can access the ACE there. ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [October 6, 2022, 2:22pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/9 "2022-10-06T14:22:36Z")
In the morph targets playground what is the loaderMat used for? ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 6, 2022, 3:06pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/10 "2022-10-06T15:06:50Z")
It’s the Node Material used in the meshes 🙂 ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [October 9, 2022, 11:45pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/11 "2022-10-09T23:45:05Z")
![Screenshot 2022-10-09 165557](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/3/a3068b597830cdc176995d9effa4c8aff50f9ebe.png) 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 ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 10, 2022, 11:08am UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/12 "2022-10-10T11:08:41Z")
What kind of trouble you’re having? Can you share a playground? 🙂 ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [October 10, 2022, 1:20pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/13 "2022-10-10T13:20:53Z")
Sure > **[Babylon.js Playground](https://playground.babylonjs.com/#VU1G98%2325)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 10, 2022, 1:33pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/14 "2022-10-10T13:33:00Z")
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. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [October 10, 2022, 2:58pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/15 "2022-10-10T14:58:19Z")
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 ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [October 10, 2022, 5:16pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/16 "2022-10-10T17:16:40Z")
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? ![Screenshot 2022-10-10 131051](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/8/28aa9ce03c7c1a59f66cee886b000e8ccd7f3e9e.png) ---
**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\ **Post date:** [October 10, 2022, 5:20pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/17 "2022-10-10T17:20:58Z")
I might be wrong, but your line 137 miss 2nd parameter? ```auto keyAction.addTargetedAnimation(morph); // no target-parameter at all ``` ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [October 10, 2022, 5:28pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/18 "2022-10-10T17:28:03Z")
I tried getting rid of it and using scene.beginDirectAnimation(casiBody, morph, 0, 2 \* frameRate, true); but the animation isn’t playing ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [October 10, 2022, 5:28pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/19 "2022-10-10T17:28:07Z")
@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](https://playground.babylonjs.com/#9CLJEF#123) 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: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/0/a0543f8288ec5ad118d895a73b0eb13f3b631677.png) 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](https://doc.babylonjs.com/typedoc/classes/BABYLON.Animation#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. ---
**Author:** ![Chris1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris1/32/17272_2.png) [@Chris1](https://forum.babylonjs.com/u/Chris1)\ **Post date:** [October 10, 2022, 6:57pm UTC](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814/20 "2022-10-10T18:57:12Z")
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 [https://raw.githubusercontent.com/chris45242/BabylonModel/main/project.blend1(UPDATED).gltf:](https://raw.githubusercontent.com/chris45242/BabylonModel/main/project.blend1(UPDATED).gltf:) Error in onSuccess callback logger.ts:101:55 [Next page](https://forum.babylonjs.com/t/create-new-animation-using-morph-targets-as-a-property/33814.md?page=2)