Getting Started
Before you start, it's good to know how Spirit works.
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:
- Spirit desktop app - editor
- Runtime - playback animations on your web page
- 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

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

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

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.

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.
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 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
Need help? Make sure to checkout the documentation first ๐
Happy animating!