Create Group

An animation group is a collection of SVG/HTML elements. Think of groups as components on the web (such as an intro or animated icon). Each group has its own controllable timeline.

Name

Give your group a descriptive name. You can access the group later on using the Web Player:

spirit.groups.get('hamburger')

Select elements to animate

You can either point and click in the browser or use the Chrome Devtools - Elements Panel.

Point and click in the browser

Limitation is that you won't be able to select parent elements.

Select via Chrome DevTools - Elements panel (Spirit tab)

Using the Elements tab to add elements to Spirit Studio gives you more control.

Make sure to read how the Web Player resolve elements:

results matching ""

    No results matching ""