At the top (purple bar) the connected web page url is shown. When you connect a web page, the animation groups on your web page will be listed here. Simply click one to edit.

Group Item


Root is the container element where this animation group is assigned to. All elements will be resolved relative to this root.

For example, consider this html:


  <article class="article1">

  <article class="article2">


Notice that there are two <article /> elements with the exact same child elements.

When we select .article1 as root, the root path will be div/article as this is the first occurring article in the DOM. Selecting .article2 results most likely in div/article[2].

Child elements will always be resolved from there.

The need

You might be wondering what's the need for all this?

Well, the runtime player needs to map the timeline data to the related elements on the web page. By saving the data to a .json file, we lose the instance references to the elements on your web page.

To solve this, the runtime uses XPath or data-spirit-id attribute to resolve the elements relative to the root. By using a root element, we simply make it generic so we can apply the same data to any container element with the same children.

For example, we could create an animation with <h1 /> and the <p /> and apply the animation data to both <article /> elements as they share the same markup of children (one h1 and one p):

  path: 'animation.json',
  container: document.querySelector('.article1')

  path: 'animation.json',
  container: document.querySelector('.article2')

Now we have the same animation applied to both elements. From a technical point of view, each <article /> has its own timeline and you could play the animations independently from each other.


The timescale refers to the speed of the animation.

You won't be able to edit this at the moment, will be in there soon!

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""