Container

Group

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

By default the container points to document.body. Best practise is to assign the container element to the parent element of where your animation assets live.

Example:

<body>
  <div class="shape-container">
    <svg>
      <g>
        <path d="..." data-spirit-id="shape">
      </g>
    </svg>
  </div>
</body>

Embed your animation

When embedding your animation you can target the container element as follow:

spirit.loadAnimation({
  container: document.querySelector(".shape-container"),
  animationData: ...
});

The elements in your animation data will now be resolved relative to this container.

Why assigning a container?

The web player needs to map the animation data to the related elements on the web page. By saving the data to a flat data format, we lose the direct connection (instances) to the elements on the web page.

To solve this, the web player uses XPath or data-spirit-id attribute to query the elements relative to the container. By using a container element, you can apply the same animation to multiple containers (as long as they share the same child-structure).

Example:

Here we reuse the same animation twice:

<body>
  <article class="post-1">
    <h1 data-spirit-id="title">Foo title</h1>
    <p data-spirit-id="paragraph">Foo</p>
  </article>

  <article class="post-2">
    <h1 data-spirit-id="title">Bar title</h1>
    <p data-spirit-id="paragraph">Bar</p>
  </article>

  <script>
    spirit.loadAnimation({
      path: './animation.json',
      container: document.querySelector('.post-1'),
    });

    spirit.loadAnimation({
      path: './animation.json',
      container: document.querySelector('.post-2'),
    });
  </script>
</body>

Assuming that animation.json containing elements title and paragraph, these elements will be resolved correctly for each container.

Open in Codepen