✍️ 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.

Resolving Elements

Resolving Elements

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.

More on resolving elements


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.



    <svg viewBox="0 0 500 500" id="container">

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

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
  • Spirit
  • Support
  • Terms