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}

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


import spirit from 'spiritjs'

(async => {

  await spirit.setup()

  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, you can access this same timeline instance with group.timeline.

Once the group is constructed, you can use the GSAP API for the timeline instance.

For example:

const timeline = group.construct()


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)


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


console.log(group.timeline) // TimelineMax

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""