✍️ Create

Use your favourite design tool to create your SVG assets, for example:

Make sure to name your layers properly. Once you've exported the SVG code, you can embed it into a HTML file.

Once you've embedded all assets in your HTML it is a good practise to identify the elements for animation. This can be done by assigning data-spirit-id attributes to elements so that Spirit is able to resolve and animate them correctly.

Connect

Open the file in Chrome.

You don't need to run a local web server, file URLs works as well.

Click on the browser extension icon to connect. Create a group in Spirit Studio and start animating. Export the animation and embed it on your web page, now you're ready to play/control it with a little bit of Javascript.

Example:

index.html

<html>
  <body>
    <svg viewBox="0 0 500 500" id="container">
      ...
    </svg>

    <script src="https://unpkg.com/spiritjs/dist/spirit.min.js"></script>
    <script>
      spirit.loadAnimation({
        container: document.getElementById('container'),
        animationData: {...} // copy and paste from Spirit Studio
      })
    </script>
  </body>
</html>

This is a contrived example, you can actually do a lot more with the web player. Make sure to check out the web player documentation.

Create your first animation group

An animation group is a collection of SVG/HTML elements that together form the animation, each with its own controllable timeline.

More on creating an animation group in Spirit Studio

✍️ Create

Resolving Elements

Connect

Create your first animation group