svgmo player

One script, one tag. Every box below plays the same file, examples/sample.json.

Autoplay, loop

Starts by itself and repeats.

<svg-mo src="sample.json" autoplay loop></svg-mo>

Play on hover

Plays while the pointer is over it, then goes back to the first frame.

<svg-mo src="sample.json" trigger="hover"></svg-mo>

Click to play once

Click starts it; it stops on the last frame.

<svg-mo src="sample.json" trigger="click" loop="false"></svg-mo>

Half speed, reversed

speed and direction.

<svg-mo src="sample.json" autoplay speed="0.5" direction="reverse"></svg-mo>

Controlled from script

Buttons and a scrubber driving the element's methods.

0 
el.play(); el.pause(); el.stop();
el.player.seekProgress(0.5);

Script API, no tag

Svgmo.load() into any element, with events.

loading…
const player = await Svgmo.load({
  container: "#api", src: "sample.json", autoplay: true, loop: false,
});
player.on("complete", () => player.play());