Animation group

An animation group is a collection of SVG/HTML elements. Think of groups as components on the web, each group has its own controllable timeline.



Give your group a descriptive name. You can access the group later on using the web player:

Add elements

Add elements

You can either point and click in the browser or use the Chrome devtools elements panel.

Example point & click:

Pros: Easy to add elements
Cons: Cannot select parent elements, it always selects the clickable target.

Example Chrome devtools

Pros: Precise control which element to add
Cons: You'll need devtools to be open


Have you noticed that elements in the video above (example point & click) are labeled in blue. This is because the elements were lacking data-spirit-id attributes, making it somehow dangerous to resolve as it falls back to XPath resolving.

The elements in video (example Chrome devtools) are labeled green, these have proper data-spirit-id attributes and Spirit will resolve the correct elements during construction of the animation.

More on resolving elements
  • Spirit
  • Support
  • Terms