Getting Started

Before you start, it's good to know how Spirit works.

Reliable Browser Extension

With Spirit, your web page is the canvas where all magic happens. You can live edit your animations directly on any web page ๐Ÿ™Œ.

You'll need the following:

  1. Spirit desktop app - editor
  2. Runtime - playback animations on your web page
  3. Chrome extension - communication between app and runtime

Install Spirit

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

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.

Install the Browser 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.

Currently, the browser extension is only available for Chrome.

If there's enough interest from the community, we can easily port the extension to other browsers.

Install the Spirit extension from the Chrome Webstore

Data Transfer

Go to a web page

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.

Connect Chrome Extension

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/.

Chrome Extension Settings

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

Give it a descriptive name and add elements.

Create Group

What the body/div/xx?

Resolving elements

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.

The fun part, start animating

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

Export and use in production

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 easily save the animation data Menu > File > Save. The animation data is outputted as .json and can be interpret by the runtime.

Use in production

To use the animation in production you'll need the runtime to be included in your web page, and use the runtime API to play the created animation.

<!--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.get('folding-title').construct().play() // construct group and play it
    })
  })
</script>

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

Need help? Make sure to checkout the documentation first ๐Ÿ™

Happy animating!