# Animation from json loading

**URL:** <https://forum.babylonjs.com/t/animation-from-json-loading/26421>\
**Category:** Bugs\
**Created:** [January 2, 2022, 4:22pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421 "2022-01-02T16:22:03Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 2, 2022, 4:22pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/1 "2022-01-02T16:22:03Z")

</div>

Hello,  
cant get the animation json loading playgrounds to work (on mac chrome). Tried with v5 and 4.2 no luck.

> **[Babylon.js Playground](https://playground.babylonjs.com/#YAWBMY%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Any ideas?

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 2, 2022, 6:15pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/2 "2022-01-02T18:15:42Z")

</div>

It looks like the problem is that the example file has an object with property “animations” which holds the array of animations, but Animation.ParseFromFileAsync expects the file to simply contain the animation or array of animations (without being wrapped in an object). Also the url was being passed as the first param but it’s actually the second.

So I simply edited the file to remove the outer object so that Animation.ParseFromFileAsync can parse it correctly. IDK how the [original file](https://doc.babylonjs.com/examples/animations.json) was generated thou or how it was expected to be parsed - did you find it from a documentation page? 🤔

> **[Babylon.js Playground](https://playground.babylonjs.com/#YAWBMY%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

> <https://github.com/BlakeOne/BlakeOne.github.io/blob/2191b5559b03ee0f02ad75dfa5150c3f791f9eca/animations.json#L1>

---

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 2, 2022, 8:39pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/3 "2022-01-02T20:39:52Z")

</div>

Thanks! The second problem I noticed but didnt help to add the name. The animation property seems to be the issue. Its interesting that same format is generated with the animation editor. Maybe something changed but the json parser didnt get updated. The snipped server seem to be working fine.

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 2, 2022, 9:37pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/4 "2022-01-02T21:37:56Z")

</div>

Ah, it’s saved from ACE. Here’s a working update of that playground from the [ACE documentation page](https://doc.babylonjs.com/toolsAndResources/tools/animationCurveEditor#load-from-json-object) that loads the file saved from the animation curve editor. It uses a new function I made based on Animation.ParseFromFileAsync() and ACE’s function loadFromFile(). When @sebavan is back we can see if a PR is needed. 🙂

> **[Babylon.js Playground](https://playground.babylonjs.com/#YAWBMY%235)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 2, 2022, 9:41pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/5 "2022-01-02T21:41:03Z")

</div>

Good stuff. Thanks again.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 3, 2022, 5:10pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/6 "2022-01-03T17:10:11Z")

</div>

This is a pretty cool idea !!! @Deltakosh what do you think about this function ? I d say yes, but let s ask ACE dad first

---

<div class="post-metadata">

**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:** [January 3, 2022, 5:23pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/7 "2022-01-03T17:23:42Z")

</div>

I like it!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 3, 2022, 5:24pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/8 "2022-01-03T17:24:19Z")

</div>

@Blake you are good to go and I ll review the PR 🙂

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 3, 2022, 6:22pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/9 "2022-01-03T18:22:51Z")

</div>

Here’s the PR for it and once the function’s live I’ll update the code snippet and PG for the doc page too - LOL it’s just 3 letters (ACE) that will need to be added to the code. 🙂 🍻

> <https://github.com/BabylonJS/Babylon.js/pull/11704>
>
> PR to add the new function ParseFromACEFileAsync to the Animation class to let u…sers load files that were saved from ACE.
> Forum: https://forum.babylonjs.com/t/animation-from-json-loading/26421/8

---

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 3, 2022, 9:09pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/10 "2022-01-03T21:09:12Z")

</div>

not sure if its related but posted another issue on animation here: [Animation wrong path in v4.2](https://forum.babylonjs.com/t/animation-wrong-path-in-v4-2/26439)

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 12, 2022, 8:47pm UTC](https://forum.babylonjs.com/t/animation-from-json-loading/26421/11 "2022-01-12T20:47:05Z")

</div>

Oops forgot about this one: now that the fix is live all you have to do is call ParseFromFileAsync and it will work automagically with files saved from ACE…

And here’s the PR to fix the missing first parameter in the doc and example playground. 🙂

> <https://github.com/BabylonJS/Documentation/pull/446>
>
> Adds null as the missing first parameter when loading from JSON to fix the examp…le code and playground in the ACE documentation.
> 
> For reference:
> Doc: https://doc.babylonjs.com/toolsAndResources/tools/animationCurveEditor#load-from-json-object
> Old pg from doc: https://playground.babylonjs.com/#YAWBMY#1 
> New pg with fix: https://playground.babylonjs.com/#YAWBMY#7
