Get Started


This section will show you how to use Spirit to create animations for the web.

We've designed Spirit to be a fun and rewarding tool. For absolute beginners, a familiarity with HTML, CSS or Javascript helps. Once you grasp the idea behind Spirit, you'll see how easy it is to create animations. Instead of code your animations manually, Spirit provides a visual tool called Spirit Studio, where you can live interact with the animations living on your web page.

Spirit Requirements

In order to interact with the web page, you'll need:

  • Spirit Studio
    The Desktop Application (Timeline Editor). Download
  • Spirit Chrome Extension
    For interacting with the animations on your web page. Install
  • Web Player
    Play animations on your web page. Usage

Install Spirit Studio

Desktop Application

Spirit Studio is a desktop app for creating and managing animations.
Buy now — $12/mo


Note: Spirit Studio is currently available as a desktop app for Mac. A distributed version for Windows and Linux will be available in the near future. Sign up for our newsletter and we'll let you know once it's there.

Create one or multiple animation groups. Simply add SVG and/or HTML elements to your animation group and create keyframes to make them move over time. The editor is always in sync with your web page, changing values in the app are immediately reflected to your web page.

Once you've installed Spirit Studio, you'll get updates for free. The app will be updated automatically in the background, this way you'll always have the latest features right under your fingertips.

Add the Chrome Extension

Your browser is the playground where all magic happens. In order to interact with animations on your web page, you'll need this extension to be installed.

The Spirit Chrome Extension is currently available for Chrome, a version for other browsers will be available in the near future. Sign up for our newsletter and we'll let you know once it's there.

Install the extension from the Chrome Webstore.

Connect a Web Page

Go to a web page you'd like to animate. Next, click on the little ghost in Chrome's browser bar. Spirit Studio is now connected with your web page.

Connect Chrome Extension

On connection, a temporary Web Player will be injected for you, this way you can easily animate any (existing) web page!

Connect to a web page running in production, development, over SSL or even sand-boxed files on your local file system.

Sand-boxed files

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: chrome://extensions/.

Chrome Extension Settings

Create an Animation Group

A group is a collection of SVG/HTML elements declaring an animation. Think of groups as components on the web. You can have as many groups as you like, each group has it's own controllable master timeline.

Give it a descriptive name and add elements.

Adding Elements

You can either point and click in the browser or use the Chrome Devtools - Elements Panel and have more control.

Chrome Extension Settings

Add "data-spirit-id" attributes

Once you've selected an element on the web page, it automatically appears in Spirit Studio. In the example above you can see that the captured element reference is something like: div/div/div[2]/header/p[2]/a.

When you're selecting an element that does not have a spirit-data-id attribute, the only reference it has is this breadcrumb-like tree called XPath (relative to the selected root), which basically points to an element by tag.

If you're creating the html yourself, it's recommended that you add a 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, which might result in resolving the wrong element.

The fun part, start animating

Add properties and create keyframes. See changes immediately on your web page, making it easy to create stunning animations where you have full control in every detail.

Export & Embed

You can copy or save the json animation data from Spirit Studio and use it directly on your web page.

Export

Save

The Spirit Web Player interpret this data and transform it into smooth running animations.

Use in Production

To embed the animation you'll need the Spirit Web Player to be included in your web page, and use the Web Player Javascript API to play/control it:

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

<!--script to play the created animation-->
<script>

  // Basic Usage

  // note: use `path` or `animationData`
  // to determine how to load animation data

  // load animation data
  spirit.loadAnimation({
    loop: true,
    yoyo: true,
    delay: 0,
    autoPlay: true,
    path: './animation.json',
    animationData: data
  }).then(
    // play it
    timeline => timeline.play()
  )

  // Advanced Usage

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

Examples

Playback:

spirit.loadAnimation({
  loop: true,
  yoyo: true,
  path: 'hamburger.json'
})

Interactive:

spirit.loadAnimation({
  autoPlay: false,
  path: 'hamburger.json'
}).then(timeline => {

  slider.addEventListener('input', event => {
    timeline.progress(event.target.value)
  })

})

Resources:

Happy animating!