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:

spirit.groups.get('hamburger')

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

Resolving

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.