Access animations

By default, the spirit instance is globally available on the window scope. Once an animation is created, it can be accessed via spirit.groups API.

You can always remove it with delete window.spirit

Example:

// assuming we've already loaded the animations previously..

// list all animation groups on the current web page.
spirit.groups.groupNames(); // ["clock", "banner", "driving-cars"]

// get the group by name
spirit.groups.get('clock');

// get the group by index
spirit.groups.at(0) // get the first group

// get the gsap timeline for "clock"
spirit.groups.get('clock').timeline; // gsap.timeline

// construct the gsap timeline and
// update the timeline on group "clock"
const clockTimeline = spirit.groups.get('clock').construct();
// clockTimeline === spirit.groups.get('clock').timeline

// iterate over groups
spirit.groups.each(group => {
  // do something with group..
});

const group = spirit.groups.get('clock');

// remove a group
spirit.groups.remove(group);

// or add it again
spirit.groups.add(group);

Groups API

/**
* List of all groups
*
* @type {Array}
*/
groups.list

/**
* Iterate over each group
*
* @type {Function}
*/
groups.each(group => { })

/**
* Get all group names
*
* @returns {Array}
*/
groups.groupNames()

/**
* Get group by name
*
* @param   {string}
* @returns {spirit.Group}
*/
groups.get('hamburger')

/**
* Get group by index
*
* @param   {number}
* @returns {spirit.Group}
*/
groups.at(0)

/**
* Add new group
*
* @type {Function}
*/
groups.add(group)

/**
* Removes group
*
* @type {Function}
*/
groups.remove(group)

/**
* Construct all groups
*
* @type {Function}
*/
groups.construct()

// listen for events
groups.on('add', group => {})
groups.on('remove', group => {})
groups.on('change:list', list => {})