Lottie Animation Integration

Content creation (3dsMax, Maya, Blender, glTF)
1

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

2 Likes
2

Hello and welcome!

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

1 Like
3

I made a simple integration,
This is the npm address babylonjs-lottie - npm (npmjs.com)

He can use it like this

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

9 Likes
4

That’s cool! :smiley:

5

w000t this is cool !!!

6

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

1 Like
7

Thai cool la

8

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

9

Hmm we could add in the Community Extensions part? Community Extensions | Babylon.js Documentation (babylonjs.com)

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

10

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

I will learn how to write the document.

2 Likes
11

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

13

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

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

1 Like
14

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

15

A small update, with UMD support. So it can now run in the playground
E)U3Q$8(V67{W9@C)~@_W5

5 Likes
16

NIIIIICE!

Sony's next-gen line of BRAVIA TVs include a dedicated 'Crunchyroll ...

1 Like
17

@qq2315137135 hey! awesome extension :sunglasses:, 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!

18

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

3 Likes
19

cc @PatrickRyan as we were talking about it yesterday :smiley:

1 Like
20

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

21

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

1 Like