# Lottie Animation Integration

**URL:** <https://forum.babylonjs.com/t/lottie-animation-integration/13009>\
**Category:** Content creation (3dsMax, Maya, Blender, glTF)\
**Created:** [July 31, 2020, 4:00am UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009 "2020-07-31T04:00:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tyler\_Sammy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tyler_sammy/32/9131_2.png) [@Tyler\_Sammy](https://forum.babylonjs.com/u/Tyler_Sammy)\
**Post date:** [July 31, 2020, 4:00am UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/1 "2020-07-31T04:00:55Z")

</div>

Curious if anyone has integrated Lottie 2D animations into babylon  
[http://airbnb.io/lottie/#/web](http://airbnb.io/lottie/#/web)

---

<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:** [July 31, 2020, 4:52pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/2 "2020-07-31T16:52:50Z")

</div>

Hello and welcome!

I did not but I’m also interested to see how it could work

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [May 18, 2023, 7:46pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/3 "2023-05-18T19:46:57Z")

</div>

I made a simple integration,  
This is the npm address [babylonjs-lottie - npm (npmjs.com)](https://www.npmjs.com/package/babylonjs-lottie)

He can use it like this

```javascript
let box = MeshBuilder.CreateBox("box")

let lottieTexture = await LottieTexture.LoadFromUrlAsync("name", "/Aniki Hamster.json", scene, {} /*option*/)
let mat = new PBRMaterial("pbr", scene)
mat.albedoTexture = lottieTexture
box.material = mat

```

[Then there is an online demo](https://646227f7e2612b0d25fafc1c--babylonjs-lottie-demo.netlify.app/)

---

<div class="post-metadata">

**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:** [May 18, 2023, 7:59pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/4 "2023-05-18T19:59:14Z")

</div>

That’s cool! 😃

---

<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:** [May 18, 2023, 8:53pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/5 "2023-05-18T20:53:31Z")

</div>

w000t this is cool !!!

---

<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:** [May 18, 2023, 8:54pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/6 "2023-05-18T20:54:35Z")

</div>

@qq2315137135 we should add it to the doc !!! cc @PirateJC and @PatrickRyan as they might be familiar with Lottie

---

<div class="post-metadata">

**Author:** ![Lun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lun/32/19231_2.png) [@Lun](https://forum.babylonjs.com/u/Lun)\
**Post date:** [May 18, 2023, 9:55pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/7 "2023-05-18T21:55:41Z")

</div>

Thai cool la

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [May 19, 2023, 6:56am UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/8 "2023-05-19T06:56:46Z")

</div>

😳  
do I need to do anything?  
I’d be happy to help, but I don’t have much experience in this area.

---

<div class="post-metadata">

**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:** [May 19, 2023, 12:48pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/9 "2023-05-19T12:48:37Z")

</div>

Hmm we could add in the Community Extensions part? [Community Extensions | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/communityExtensions)

You can write about it in our docs if you’d like, we have our documentation repo here 😃 [BabylonJS/Documentation: Babylon.js’s documentation website (github.com)](https://github.com/BabylonJS/Documentation)

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [May 19, 2023, 2:11pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/10 "2023-05-19T14:11:02Z")

</div>

I would love to.  
However, since English is not my first language, I may not be able to write very well.

I rely on translation software.  
 ![F4E6(J20GEUCLKF_BC6%W](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/e/6e8e8a160300e425b1581222a07c9ac018968390.gif)

I will learn how to write the document.

---

<div class="post-metadata">

**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:** [May 22, 2023, 12:49pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/11 "2023-05-22T12:49:09Z")

</div>

If you have any questions about the language feel free to send me a PM and I’ll help you as I can 😃 English is also my second language so I know it feels complicated to write sometimes 😅

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [May 22, 2023, 3:50pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/13 "2023-05-22T15:50:07Z")

</div>

Actually, I already sent a PR. I missed the metadata, and it’s still under review.  
Sorry for the bad writing

![}QWXSR`COYWOL}J{UVHO](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/f/2f878c17112b452893913ebb4ff7cd55f5dc30b3.gif)

[Add community extension lottie texture documentation by 2315137135 · Pull Request #860 · BabylonJS/Documentation (github.com)](https://github.com/BabylonJS/Documentation/pull/860)

---

<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:** [May 22, 2023, 4:09pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/14 "2023-05-22T16:09:40Z")

</div>

@qq2315137135 you are the best, thanks a lot !!!

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [May 26, 2023, 2:37am UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/15 "2023-05-26T02:37:52Z")

</div>

A small update, with UMD support. So it can now run in the playground  
 ![E)U3Q$8(V67{W9@C)~@_W5](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/b/db2cc8d053ad41c12949ea8582a8740e1337fe95.gif)

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

https://playground.babylonjs.com/frame.html#QG4M5P#4

---

<div class="post-metadata">

**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:** [May 26, 2023, 12:05pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/16 "2023-05-26T12:05:56Z")

</div>

NIIIIICE!

![Sony's next-gen line of BRAVIA TVs include a dedicated 'Crunchyroll ...](https://media.tenor.com/KVFqRA1S1NoAAAAd/bocchi-the-rock-bocchi.gif)

---

<div class="post-metadata">

**Author:** ![mpaleo.meetkai](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mpaleo.meetkai/32/38624_2.png) [@mpaleo.meetkai](https://forum.babylonjs.com/u/mpaleo.meetkai)\
**Post date:** [April 1, 2024, 7:09pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/17 "2024-04-01T19:09:20Z")

</div>

@qq2315137135 hey! awesome extension 🕶, so I wasn’t able to find the repo for babylonjs-lottie to update the babylon peer dependeny to 7.0, do u have any plans to publish the repo or update the dependency ?  
Thanks!

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [April 2, 2024, 2:53am UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/18 "2024-04-02T02:53:33Z")

</div>

I just updated the peer dependencies to 7.0. The repository link is here [https://github.com/2315137135/babylonjs-lottie-project](https://github.com/2315137135/babylonjs-lottie-project)

---

<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:** [April 2, 2024, 2:41pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/19 "2024-04-02T14:41:07Z")

</div>

cc @PatrickRyan as we were talking about it yesterday 😃

---

<div class="post-metadata">

**Author:** ![mpaleo.meetkai](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mpaleo.meetkai/32/38624_2.png) [@mpaleo.meetkai](https://forum.babylonjs.com/u/mpaleo.meetkai)\
**Post date:** [April 3, 2024, 5:09pm UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/20 "2024-04-03T17:09:38Z")

</div>

Thank u so much!!  
(btw, the repo from that link looks private)

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [April 4, 2024, 10:44am UTC](https://forum.babylonjs.com/t/lottie-animation-integration/13009/21 "2024-04-04T10:44:43Z")

</div>

Now, I’ve changed the visibility of the repository to public.  
I didn’t pay that much attention when I created it 😂