Design Workflows

Spirit Studio is not a design tool and doesn't force you to use a specific design tool. You can use any design tool you prefer, as long as it can generate SVG (or HTML), or write SVG/HTML yourself if that's your thing.

From a technical point of view Spirit assumes that your assets (= SVG/HTML elements) are in the active document on your web page.

We're working on a nifty cool feature to embed elements in your animation data, so you can easily duplicate elements and apply repeating animation logic. Sign up for our newsletter and we'll let you know once we launch it.

Start with an Existing Web Page

This is pretty straight forward. You simply connect to an existing web page and select the elements to animate.

Start from Scratch

There are several ways to create an animation from scratch. The simplest way is the create your assets in your favorite design tool (Illustrator for instance). TIP: Create and order the layers and export it as SVG.

If you're using Illustrator, here are some links that might be useful: https://helpx.adobe.com/illustrator/how-to/export-svg.html https://helpx.adobe.com/illustrator/using/svg.html#enhancements

Create a new index.html file and copy/paste the SVG code, example:

<html>
<head>
  <title>My Animation</title>
</head>
<body>

  <svg viewBox="0 0 500 500" width="500" height="500">
    ...
  </svg>

</body>
</html>

Open the file in Chrome.

You don't need to run a local web server, sandboxes files from your local file system works as well. See Get Started Page

Click on the browser extension to connect. Create a group and start animating. Once done export the animation and embed it on your web page ready for production.

Example:

<html>
<head>
  <title>My Animation</title>

  <!-- load the web player -->
  <script src="https://unpkg.com/spiritjs/dist/spirit.min.js"></script>
</head>
<body>

  <svg viewBox="0 0 500 500" width="500" height="500">
    ...
  </svg>

  <script>
    // play animation
    spirit.loadAnimation({
      animationData: {} // your exported animation here
    })
  </script>

</body>
</html>

results matching ""

    No results matching ""