Embed Animations

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 GSAP is loaded and available.

GSAP is the default animation strategie.

1. Load animations

import { load } from 'spiritjs'

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

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 web server (not in sandboxed files from your local file system).

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}   containerElement  bind groups to element (default = document.body)
* @returns {spirit.Groups}
*/
spirit.create(data, containerElement)

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 Spirit Studio.

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)

results matching ""

    No results matching ""