export multiple timelines and play in a master timeline

[eduardfossas]

Hello, sorry if I am bothering too much this forum but I am eager to learn.

 

I have the following code:

 

import { gsap } from 'gsap'

export const SPINNER_TIMELINE = gsap.timeline({ paused: true })
export const LOADER_TIMELINE = gsap.timeline({ paused: true })
export const HERO_TIMELINE = gsap.timeline({ paused: true })
export const HEADER_TIMELINE = gsap.timeline({ paused: true })
export const MASTER_TIMELINE = gsap.timeline({ paused: true })

 

then I am doing this in a Spinner class:

 

import { SPINNER_TIMELINE } from '@options/timelines'

class Spinner {
  constructor(element) {
    this.setLoader()
  }
  
  setLoader(spinner, spinnerBot) {
  	SPINNER_TIMELINE.to(
      spinner.left.start,
      {
        x: 10
        duration: '1',
        ease: 'none',
      },
    )
  }
}

and then I am having another class that creates and instance of this spinner class

import {
  SPINNER_TIMELINE,
  MASTER_TIMELINE,
} from '@options/timelines'

class Intro {
  constructor() {
    new Spinner()
    this.animateMasterTimeline()
  }
  
  animateMasterTimeline() {
    MASTER_TIMELINE.add(SPINNER_TIMELINE, {
      time: SPINNER_TIMELINE.duration(),
      duration: SPINNER_TIMELINE.duration(),
      ease: 'power3.inOut',
    })
  }
}

Spinner and Intro class are starting properly but the animation it's not.

What I am doing wrong?

 

Warm regards and thanks in advance

[OSUblake]

Hard to tell, but probably because your original timeline is paused.

[OSUblake]

And this doesn't look right at all.

MASTER_TIMELINE.add(SPINNER_TIMELINE, {
      time: SPINNER_TIMELINE.duration(),
      duration: SPINNER_TIMELINE.duration(),
      ease: 'power3.inOut',
    })

 

.add() is only for adding stuff to a timeline. Looks like you are trying to add and create an animation.

https://greensock.com/docs/v3/GSAP/Timeline/add()

 

[eduardfossas]

Hello, again @OSUblake. The issue was initialising my modules asynchronously. Btw, regarding your last comment, can you help me to know what it is the best way of adding timelines to a master timeline with the new gsap 3 syntax?

 

Thanks in advance!