API - Shorthand

spirit.loadAnimation(
  data: Options
): Promise<gsap.Timeline | { [key:string]: gsap.Timeline }>

This shorthand notation will cover most animation playback scenarios, for more control see API documentation

Options:

Param	Value	Default
`path`*	`string` The url to your animation data
`animationData`*	`object` Raw animation data (copied from app)
`container`	`Element` The DOM element on which to render the animations	`document.body`
`autoPlay`	`boolean` Start playing once loaded	`true`
`loop`	`boolean`,`number` Use number for repeat count, or `false` to disable loop	`false`
`yoyo`	`boolean` Play animation back and forth,	`false`
`delay`	`number` The repeat delay,	`0`
`timeScale`	`number` Overwrite time scale for animations

* Either use path to load from url or animationData to create from RAW animation data copied from Spirit Studio.

Example:

spirit.loadAnimation({
  container: document.getElementById('#container'),
  path: './animation.json',
  autoPlay: false
}).then(timeline => {
  timeline
    .reverse()
    .yoyo()
    .play();
});

Animation playback

Play animation from clipboard data:

spirit.loadAnimation({
  animationData: {...} // copy & paste from Spirit Studio
});

Play animation from url:

spirit.loadAnimation({
  path: './animation.json'
});

Add playback features (like loop, yoyo, etc):

spirit.loadAnimation({
  loop: true,
  yoyo: true,
  delay: 1,
  path: 'animation.json'
});

Return values

If the animation data contains one animation group a GSAP timeline is returned, else it returns an indexed object containing GSAP timelines.

Load a single group

spirit.loadAnimation(
  data: Options
): Promise<gsap.Timeline>

Example:

spirit.loadAnimation({
  path: './single-group.json',
  autoPlay: false
}).then(timeline => {
  timeline.repeat(-1).play();
});

Load multiple groups

spirit.loadAnimation(
  data: Options
): Promise<{ [groupName: string]: gsap.Timeline }>

Example:

spirit.loadAnimation({
  path: './multiple-groups.json',
  autoPlay: false
}).then(( { logo, icons } ) => {
  logo.play()
  icons.reverse().play()
});

Tip:

Here's a code snippet that handles both (single- and multiple groups).

Load the animation
Show the container
Play all animations

const container = document.getElementById('#container');

function onLoad(data) {
  // container is hidden (in css)
  // show container
  gsap.set(container, { autoAlpha: 1 });

  if (data instanceof gsap.core.Timeline) {
    // single
    data.play();
  }else{
    // multiple
    Object.keys(data).forEach(
      groupName => data[groupName].play();
    );
  }
}

spirit.loadAnimation({
  container,
  path: './single-or-multiple-groups.json',
  autoPlay: false // don't play immediately
}).then(onLoad);