Groups

At the top the connected web page url is shown. The animation groups on your web page will be listed here. Simply click one to edit.

Group

Container

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

For example, consider this html:

<div>

  <article class="article1">
    <h1>Title</h1>
    <p>Paragraph</p>
  </article>

  <article class="article2">
    <h1>Title</h1>
    <p>Paragraph</p>
  </article>

</div>

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

When we select .article1 as the container element, the XPath to this container will be div/article as this is the first occurring article in the active document. Selecting .article2 results most likely in div/article[2].

Child elements will always be resolved from container elements!

Why assigning your group to a container?

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

The Web Player needs to map the animation data to the related elements on the web page. By saving the data to a .json file, we lose the direct instances to the elements on the web page.

To solve this, the Web Player uses XPath or data-spirit-id attribute to resolve the elements relative to the container. By using a container element, we simply make it generic so we can apply the same animation to multiple containers (as long as these containers have the same elements).

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):

spirit.loadAnimation({
  path: 'animation.json',
  container: document.querySelector('.article1')
})

spirit.loadAnimation({
  path: 'animation.json',
  container: document.querySelector('.article2')
})

If you do not specify a container, it defaults to document.body

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/control the animations independently from each other.

Timescale

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!

results matching ""

    No results matching ""