API - Create

Parse the RAW animation data 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.create(
  rawData: object,
  containerElement: HTMLElement | SVGElement
): Spirit.Groups;

This method is used if you'd like to embed the animation on your web page without having to load the animation data from an url.

Return value

spirit.create() returns an object called Spirit.Groups which contains 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);

// create groups
const groups = spirit.create(
  {...}, // copy & paste from Spirit Studio
  document.getElementById('#container')
);

// construct all timelines
groups.construct();

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