Introduction

This is an integration of lottie-web and babylonjs.

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

Demo

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

install

npm add babylonjs-lottie @babylonjs/core

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

example

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*/)

lottieTexture.lottieAnimation.play()
lottieTexture.lottieAnimation.pause()
lottieTexture.lottieAnimation.currentFrame()
//....

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,
})