Before you can start animating, you'll need to have your assets in place. Assets can be any valid html (including SVG).
<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>
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/path, which might result in inaccurate element resolving (html structure might change frequently)
Include the runtime to your page.
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.
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.
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.
Add keyframes and create your animation.
Save your animation
Use it directly
spirit.load( animationData )
Need help? Make sure to checkout the documentation