Lottie Texture

An extension library. Load and play the lottie animation file in babylonjs.


This is an integration of lottie-web and babylonjs.

He allows you to load the lottie json file as a texture for babylonjs


What is Lottie?

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Official website


pnpm add babylonjs-lottie @babylonjs/core

Currently relies on the "@babylonjs/core" package, probably does not support "babylonjs" package


Load lottie json file

import {LottieTexture} from "babylon-lottie"
let lottieTexture = await LottieTexture.LoadFromUrlAsync("name", "/lottie.json", scene, {} /*option*/)

Create a box and set the texture to lottie animation

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

LottieTexture exposes the lottieAnimation property.

You can use it to control the playback pause of the animation, or to get the playback progress, and other api.

let lottieTexture = await LottieTexture.LoadFromUrlAsync("name", "/lottie.json", scene, {} /*option*/)


await LottieTexture.LoadFromUrlAsync("name", "/lottie.json", scene, {
useAnimeSize: false, // If true then use the width and height set in the animation file
autoPlay: true,
width: 512,
height: 512,
loop: true,