glaxnimate

Glaxnimate Web

Web library to embed and edit Glaxnimate animation on web pages.

Usage

Loading the library

You can load from CDN. Both jsdelivr and unpkg are supported:

<script src="https://cdn.jsdelivr.net/npm/glaxnimate/glaxnimate.min.js"></script>

or

<script src="https://unpkg.com/glaxnimate@latest/glaxnimate.js"></script>

Usage

<script>
// Create the player  
let player = new Glaxnimate.Player({
    canvas: document.getElementById("canvas")
});

// Load an animation explicitly
// You can also just pass these to the constructor if data is available
player.load({
    // `data` can be a string, Uint8Array, or ArrayBuffer
    data: "your data", 
    // You have to specify `format` or `filename` so the correct importer can be used
    format: "glaxnimate"
});

// Fetch a remote animation
player.fetch("example.rawr");

// ... 

// Control playback
player.pause();
player.play();

// Edit the animation live
let fill = player.composition.shapes[0].shapes[0].shapes[0];
fill.color.value = {red: 255, green: 0, blue: 255, alpha: 255};
</script>

Supported Formats

• Glaxnimate .rawr
• Lottie .lot, .json
• SVG .svg
• AEP .aep, .aepx

Experimental formats:

• Andorid Vector Drawables .avd
• Rive .riv

Links

• Repo
• Issues
• npm
• CDN unpkg jsdelivr

License

GPLv3+