gloxie-web

Gloxie is a light-weight Lottie player for the web.

Goals

It aims to be a drop-in replacement to lottie-web, using modern JS and conforming to the Lottie Animation Community specs.

The reason for this is that lottie-web is currently unmaintained and the codebase is diffilt to follow and make changes to.

Usage

You can load gloxie-web from a CDN as a regular JS library:

<script src="https://cdn.jsdelivr.net/npm/gloxie-web@latest/dist/gloxie.js"></script>

You can also import it as an EcmaScript module

<script type="module">
import * as gloxie from "https://cdn.jsdelivr.net/npm/gloxie-web@latest/dist/gloxie-ecm.js"
</script>

The Gloxie API is fairly straighforward:

// Initialize
let player = new gloxie.LottiePlayer({
    container: document.getElementById("container"),
    autoplay: true,
    loop: true,
    speed: 1, // Speed multiplier. 2 will make it play twice as fast
    background: "", // You can set a CSS color for the background, defaults to transparent
});

// Load your animation
player.load_url("https://.../mylottie.lot");
// or
player.load_data({/* Lottie as JSON */});

// Player controls
player.play();
player.pause();
player.time = 20; // Sets the time in frames

You can also use it in your HTML directly once the script has been loaded:

<gloxie-player src="https://.../mylottie.lot" autoplay loop />

Note that the ESM script doesn't have side-effects so you need to initialize the element before it becomes available:

gloxie.GloxiePlayerElement.register();

Gloxie has a compatibility API with the same interface as lottie-web, so it can be used as a drop-in replacement:

<script>
let player = lottie.loadAnimation({
    container: document.getElementById("container"),
    renderer: "canvas",
    autoplay: true,
    loop: true,

    // one of these:
    animationData: { /* Lottie as JSON */ },
    path: "https://.../mylottie.lot",
});
</script>

License

Copyright (C) 2025 Mattia Basaglia

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Building

Build minified js file:

make dist/gloxie.js

Links

• Repo
• Docs
• Demo
• npm