Timeline Construction

A Spirit group is a collection of GSAP timelines that together form a new timeline instance. Because elements can be part of multiple groups you'll need to construct the timeline once before using it.

/**
* Constructs the timeline
*
* @returns {TimelineMax|TimelineLite}
*/
group.construct()

What group.construct() does

On group construction:

  1. Clear previous timeline & tweens for elements
  2. Clear GSAP cache for elements
  3. Create a new GSAP timeline instance
  4. Return the newly created timeline instance

Example


spirit.setup().then(() => {
  const group = spirit.create(animationData /* copy paste from app */).get('group-name')
  const timeline = group.construct()
  // timeline is a valid GSAP timeline..
})

group.construct() returns a GSAP Timeline instance, you can access this same timeline instance via group.timeline.

Once the group is constructed, you can use the GSAP API to interact with the timeline.

For example:

const timeline = group.construct()

timeline
  .yoyo(true)
  .repeat(-1)
  .repeatDelay(10)
  .play()

Construct events

On group construction the construct event is dispatched. Listen for construct events:

const group = spirit.groups.get('group-name')

group.on('construct', timeline => {
  console.log('group is constructed => ', timeline)
})

group.construct()

Timeline instance

Initially, the group.timeline instance is null. Once the group is constructed, the timeline instance will be accessible via group.timeline.

Assume we have a group:

console.log(group.timeline) // null

group.construct()

console.log(group.timeline) // TimelineMax

results matching ""

    No results matching ""