Getting Started

Setup Assets

Before you can start animating, you'll need to have your assets in place. Assets can be any valid html (including SVG).

Example

<html>
  <body>

    <div>
      <img src="eyes.png"      data-spirit-id="eyes">
      <img src="arm-left.png"  data-spirit-id="arm-left">
      <img src="arm-right.png" data-spirit-id="arm-right">
    </div>

  </body>
</html>

Element resolving

Notice the data-spirit-id attributes. This way we make sure Spirit can identify and resolve the elements to animate.

If you do not provide the data-spirit-id attribute, Spirit resolve elements using XPath. For example svg[1]/path[2], which might result in inaccurate element resolving (html structure might change frequently)

Add Runtime

Include the runtime to your page.

<script src="https://unpkg.com/spiritjs/dist/spirit.js"></script>

Are you using NPM?, checkout the install guides.

Spirit Desktop App

Download the Spirit Desktop app.

Currently, Spirit is in Private Alpha. Expected to be available for download this summer!

Spirit will be available as a macOS desktop application.
As of right now, there is no Spirit client for Windows or Linux, but don't worry Spirit will be available for Windows and Linux in the near future.

The Spirit application is a GUI for creating and managing animations. You can connect any spirit-enabled web page and live edit your animations anytime.

New features!

Based on user feedback, new features are added frequently! There are some really cool features coming soon, don't forget to signup for the newsletter and keep posted on any updates.

Install the Chome Extension

Your browser is the playground where all magic happens. To setup a connection between the desktop app and your web page, you'll need the extension to be installed.

Right now only Chrome is supported, but support for other browsers (Safari, Firefox, ..) will be available in the future.

You can find the extension here.

Connect Web page

Now we have our assets in place, open Spirit and connect the web page.

Open Spirit desktop app
Click on the Spirit browser icon (in Chrome), yes that little ghost in the corner.

Create and load animations

Now that your web page is successfully connected the the application, let's create an animation group. Give it a proper name and assign object(s) to it.

Animation Group:
An animation group is a collection of objects (html elements) you want to animate. Think of groups as components on the web. You can create as many groups as you like and have full control of everyone of them.

Create

Add keyframes and create your animation.

Save your animation

Use it directly

spirit.load( animationData )

Need help? Make sure to checkout the documentation

Happy animating!