Getting Started

Spirit is currently in private beta. You can find the installation instructions in your mailbox once your account is activated.

The amount of beta testers is huge (16.000+). Accounts will progressively be activated during the beta period to keep things manageable. Please be patient, it might take some time to receive a beta license.

Not invited? Dying to try it out and willing to give me valuable feedback, please drop me a mail at support@spiritapp.io.

Desktop application

The desktop app is a graphical user interface for creating and managing animations. You can connect any 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.

Navigate to a web page you'd like to animate.

Connect

Click on the little ghost in your browser bar to hookup the web page.

If the web page you're visiting has no Spirit runtime, the extension will auto inject a temporary runtime for you. This way you can edit any web page, whether it runs in production, development, over SSL or even sandboxed files on your local filesystem.

Tip

If you want to animate a web page from your local filesystem, make sure to toggle the checkbox "Allow access to file URLs" in your chrome extension setting Menu > Window > Extensions or simply browse to chrome://extensions/.

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, each group has it's own timeline.

Give it a descriptive name and add elements.

What the body/div/xx?

Notice the weird body/div/div/div[2]/...ish syntax in the captured element?

This means that the captured element doesn't have a data-spirit-id attribute on it, thus the only reference it has is a XPath (relative to the selected root).

If you're creating the html yourself, it's recommended to add data-spirit-id to each element you'd like to animate. Although using xpath works most of the time, referencing an element by xpath is not very reliable, the web page Document Object Model might change over time, resulting in invalid element resolving.

Create it

Once you've selected all the elements, hit that big blue button on the bottom to create the group.

Add properties and create keyframes. Changes are immediately reflected to the web page, making it easy to create awesome animations.

It wouldn't be of any use if you couldn't use the animation in production right?

Export

When you're happy with the result, you can export the animation:The animation data is outputted as .json and can be loaded with the runtime.

Use in production

To embed the animation you'll need the runtime (player) to be included in your web page, and use the runtime API to play it.

<!--include the runtime-->
<script src="https://unpkg.com/spiritjs/dist/spirit.js"></script>

<!--script to play the created animation-->
<script>
  spirit.setup().then(() => { // load GSAP from CDN
    spirit.load('animation.json').then(groups => { // load animation data
      groups.at(0).construct().play() // construct first group and play it
    })
  })
</script>

The runtime is UMD compatible and can be used in NPM as well. Checkout the Install Guides