A WASM version of Skottie (Lottie with Skia).
To use the library, run npm install skottiekit-wasm
and then simply include it:
<script src="/node_modules/skottiekit-wasm/bin/skottiekit.js"></script> const loadKit = SkottieKitInit({ locateFile: (file) => '/node_modules/skottiekit-wasm/bin/'+file, }); // Load the animation Lottie JSON file. const loadLottie = fetch('/path/to/lottie.json').then((resp) => resp.text()); Promise.all([loadKit, loadLottie]).then((values) => { const [SkottieKit, lottieJSON] = values; const animation = SkottieKit.MakeManagedAnimation(lottieJSON); const duration = animation.duration() * 1000; // Assumes there's a <canvas id="my_canvas"> somewhere const surface = SkottieKit.MakeCanvasSurface("my_canvas"); const firstFrame = Date.now(); const clearColor = SkottieKit.WHITE; function drawFrame(canvas) { // seek takes a float from 0.0 to 1.0 const seek = ((Date.now() - firstFrame) / duration) % 1.0; animation.seek(seek); canvas.clear(clearColor); animation.render(canvas, bounds); surface.requestAnimationFrame(drawFrame); } surface.requestAnimationFrame(drawFrame); })
As with all npm packages, there's a freely available CDN via unpkg.com:
<script src="https://unpkg.com/skottiekit-wasm@0.1.0/bin/skottiekit.js"></script> const loadKit SkottieKitInit({ locateFile: (file) => 'https://unpkg.com/skottiekit-wasm@0.1.0/bin/'+file, })