How do I include "babylon-lottie"

Questions
1

Anxious to see my Lottie assets working. The documentation had:

    import { LottieTexture } from "babylon-lottie"

And some what new to JavaScript. I added to index.html:

<script>
    import { LottieTexture } from "babylon-lottie"
</script>

But that is not finding the JavaScript source. And getting an error:

Uncaught SyntaxError: Cannot use import statement outside a module (at index.html:28:9)

Thank you in advance for the help.

2

Please just note that lottie is not an official babylon addon. It is maintained by a community member: @qq2315137135

1 Like
3

I did find the demo that works from the Extensions. :slight_smile: Another one in a discussion thread was broken.

4

Anyway I can clone the demo: https://babylonjs-lottie-demo.netlify.app/

5

Where are the Community Contributions kept?

6

I believe I found it: GitHub - 2315137135/babylonjs-lottie-project

7

This should fix your issue:

<script type="module">
    import { LottieTexture } from "babylon-lottie"
</script>
1 Like
8

Thank you. I will give that a try. I ended up recreating the demo project in Vue, copied asset files, typescript files, vue files to the newly generated project. Then installed packages npm install until it worked. Four installs total. Only three were needed.

1 Like
9

If you want to use it in non-module JS, you can use the UMD version from CDN. Here’s an example:

In the example:

LoadScriptAsync("https://www.unpkg.com/babylonjs-lottie@1.2.6/dist/index.umd.js")

is equivalent to:

<script type="text/javascript" src="https://www.unpkg.com/babylonjs-lottie@1.2.6/dist/index.umd.js"></script>

Then you can use:

let lottieTexture = LOTTIE.LottieTexture.ParseFromObject("", lottieJsonObject, scene)
2 Likes