API

The open source Web Player can be found here.

See Install the Web Player.

For clarity sake, we use the async/await syntax here to avoid cluttering callback hell.

Basic Usage

(async => {

  // first make sure GSAP is loaded
  await spirit.setup()

  let groups

  // we could load animation data externally..
  groups = await spirit.load(url)

  // ..or parse directly
  groups = spirit.create(data)

  // at this point groups is a collection of Group instances [Group, Group, Group],
  // each containing it's own timeline

  // let's say we have 3 animation groups
  let groupA = groups.at(0) // or retrieve by name groups.get('animation-1')
  let groupB = groups.at(1) // or retrieve by name groups.get('animation-2')
  let groupC = groups.at(2) // or retrieve by name groups.get('animation-3')

  // we need to construct the group before using it.
  // group.construct() creates a valid GSAP timeline

  // before constructing, the timeline is null
  console.log(groupA.timeline)
  // null

  groupA.construct()

  // after constructing, the time is present and ready for playback.
  console.log(groupA.timeline)
  // TimelineMax

  // now the timeline is here, we can use the GSAP Timeline API to control it
  groupA.timeline.play()

  // pause the timeline
  groupA.timeline.pause()

  // progress the timeline to 50%
  groupA.timeline.progress(.5)

  // reverses playback
  groupA.timeline.reverse()

  // jumps to 2s
  groupsA.timeline.seek(2)

  // play segment of timeline from 1s to 2s
  groupsA.timeline.tweenFromTo(1, 2)

  // and a lot more! See GSAP docs for usage

  // applying interaction is super easy, for instance progress by mouse position
  onmousemove = ({ clientX }) => groupA.timeline.progress(clientX / window.innerWidth)
})

Example with event callbacks:

groupA.timeline.eventCallback('onUpdate', () => {
  // triggered on update
})
groupA.timeline.eventCallback('onComplete', () => {
  // triggered on complete
})

Go checkout:

results matching ""

    No results matching ""