Sign up free
Start creatingRead the guide

11 KB, no dependencies

Play animations on any web page with one small script

svgmo-player.js is about 30 KB, 11 KB gzipped, with no dependencies. It adds a <svg-mo> tag that plays svgmo JSON files, and an Svgmo object for the times a tag is not enough.

Download the playerPlayer reference

What you write

<script src="svgmo-player.js"></script>

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

What the page shows

  • 11 KBgzipped, no dependencies
  • 1 tagwith triggers as attributes
  • 0 costfor layers that stand still

Try every option

Each example below is the code beside it, running. It also pauses itself when scrolled out of view, which saves battery.

trigger="hover"

Plays while the pointer is over it, and returns to the first frame when it leaves.

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

Move the pointer over the heart.

trigger="click"

Each click plays or pauses.

<svg-mo src="toggle.json" trigger="click"></svg-mo>

Click the switch.

trigger="visible"

Starts when the animation scrolls into view. Here it plays once.

<svg-mo src="check.json" trigger="visible" loop="false"></svg-mo>

It played when this card scrolled into view. Scroll away and back to see it again.

speed

Play at any rate. 1 is normal; 2 is twice as fast; 0.5 is half speed.

0.5×
1×
2×
<svg-mo src="orbit.json" autoplay speed="0.5"></svg-mo>
<svg-mo src="orbit.json" autoplay speed="1"></svg-mo>
<svg-mo src="orbit.json" autoplay speed="2"></svg-mo>

direction="reverse"

Play backwards. Compare forward and reverse side by side.

forward
reverse
<svg-mo src="wave.json" autoplay></svg-mo>
<svg-mo src="wave.json" autoplay direction="reverse"></svg-mo>

respect-reduced-motion

If the visitor asks their system for less motion, show the last frame and do not animate.

<svg-mo src="bars.json" autoplay respect-reduced-motion></svg-mo>

Turn on Reduce motion in your system settings, reload, and these bars stand still.

play(), pause(), stop(), seek() and events

Control an animation from your own script, and listen for ready, play, pause, loop, complete and error.

  1. Events appear here.
const el = document.querySelector("svg-mo");

el.play();
el.pause();
el.stop();     // back to the first frame
el.seek(20);   // jump to frame 20

el.addEventListener("complete", () => console.log("done"));
el.addEventListener("error", (e) => console.warn(e.detail));
Try your own file in the preview tool

No player needed for a plain animation

Animated SVG export plays by itself and needs no script. Use the player when the page has to control it.

Compare the exports