Load animation data

There are 2 ways to embed the animations on your web page:

  1. spirit.load(), load external .json file.
  2. spirit.create(), parse raw ([object Object]) data. (no need to load anything)

Make sure to call spirit.setup() first:

spirit.setup().then(() => {
  // your code here!
})

spirit.setup() ensures the presence of GSAP.

GSAP is a required dependency of the Spirit runtime player in order to play the animations on your web page.

1. Load animations

import { load } from 'spiritjs'

/**
* @param   {string}  url     animation data (created with Spirit app)
* @param   {Element} element bind groups to element (default = document.body)
* @returns {Promise}
*/
load(url, element)

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

Uses XMLHttpRequest to fetch the json data and parse groups. Only works on a running web server.

spirit.load('groups.json').then(groups => {
  groups.at(0).construct().play() // play first group
})

2. Create animations

import { create } from 'spiritjs'

/**
* @param   {object}    data     animation data (created with Spirit app)
* @param   {Element}   element  bind groups to element (default = document.body)
* @returns {spirit.Groups}
*/
spirit.create(data, element)

Instead of loading, you can pass in the raw animation data directly.

spirit.create({...}).at(0).construct().play() // play first group

Both methods make the animation groups ready for animation playback and can be resolved by the Spirit desktop application.

Accessing the animation groups

You can access the animation groups using spirit.groups:

import spirit from 'spiritjs'

// access group by name
spirit.groups.get('your-group-name')

// access group by index
spirit.groups.at(0)

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""