API - Load

Load the animation data from url and turn it into runnable Spirit data that can be used to generate GSAP timelines.

This is a slightly advanced usage. Try spirit.loadAnimation() first.

spirit.load(
  path: string,
  containerElement: HTMLElement | SVGElement
): Spirit.Groups;

Use spirit.load() to load the animation data from a .json file.

Return value

spirit.load() returns a Promise with Spirit.Groups, containing the parsed data ready to be constructed for animation.

Spirit.Groups API

/**
 * Container element
 *
 * @type {HTMLElement|SVGElement}
 */
rootEl

/**
 * Add group data
 *
 * @param group {Spirit.Group}
 */
add(group: Spirit.Group);

/**
 * Remove group data
 *
 * @param group {Spirit.Group}
 */
remove(group: Spirit.Group);

/**
 * Construct all groups at once.
 *
 * @param resolve {boolean}
 * @returns {Array<gsap.Timeline>}
 */
construct(resolve = false);

/**
 * Get group by name
 *
 * @param name {string}
 * @returns {Spirit.Group}
 */
get(name: string): Spirit.Group;

// LIST

/**
 * The actual groups list
 *
 * @type {Array<Spirit.Group>}
 */
list: Array<Spirit.Group>;

/**
 * Get group at index
 *
 * @param index {number}
 * @returns {Spirit.Group}
 */
at(index: number): Spirit.Group;

/**
 * Clear all groups
 */
clear(): void;

/**
 * Iterate over groups
 *
 * @param cb {Function}
 */
each(cb: (group: Spirit.Group) => void): void;

Example:

spirit.setup(gsap);

spirit.load(
  './animation.json',
  document.getElementById('#container')
).then(groups => {
  // construct all timelines
  groups.construct();

  // play all animations just once
  groups.each(
    group => group.play()
  );
});