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