Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
harp

Play first timeline and then play second timeline "only" when user clicks on button

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I had previously created a forum for this but my approach was wrong - I did not add a Codepen so this is the same forum but with codepen and better explanation of what I'm trying to achieve.

Objective:  Have two timelines run under master timeline - first timeline will run automatically and then the second timeline will be paused by default. Hence, the second timeline will run "only" when user clicks a button.
1. first timeline - works beautifully.
2.  second timeline run on button click - works but isn't controlled by master timeline not sure how to fix it, tried labels and etc but no luck. Tried to pause the mastertimeline when second timeline is added but didn't work.

Here is the codepen:
 

See the Pen WzedpM?editors=0010 by harp30 (@harp30) on CodePen

 

See the Pen WzedpM?editors=0010 by harp30 (@harp30) on CodePen

Link to comment
Share on other sites

Solved it:

 

playTimeline(){
    //this.tlMaster.landTimeline.play(); //did this
    this.tlMaster.play('play-landtimeline');
}


masterTimeline(){

    console.log('testing');

    this.tlMaster
        .add(this.loadTimeline())
        // .addLabel('label') // and did this..
        .addPause()
        .add('play-landtimeline')
        .add(this.landTimeline());

};

So, paused the master timeline and then added a label - 'play-landtimeline'
When playTimeline is called via click function then master timeline will play and will play at the label which will
run the this.landTimeline method.

Thank you for the help 

Sorry about my mistakes, I will include codepen and better explaining.  
  • Like 1
Link to comment
Share on other sites

Nice job figuring it out :)

 

I don't know what your project looks like, but I feel like you could just have two separate timelines, and give paused: true to the second one. But maybe it's easier for you to have everything in only one timeline!

  • Like 4
Link to comment
Share on other sites

49 minutes ago, harp said:

2.  second timeline run on button click - works but isn't controlled by master timeline not sure how to fix it, tried labels and etc but no luck. Tried to pause the mastertimeline when second timeline is added but didn't work.

 

There's nothing wrong with having multiple timelines. If I have to spend more than 2 brain cycles figuring out how to make a sub-timeline work with a master timeline, I'll leave it as a separate timeline and move on.

  • Like 3
Link to comment
Share on other sites

Yep - as @OSUblake and @Acccent suggested - two timelines would probably be a better choice in this case.

 

That's where I was heading in my advice to you in your other thread with this issue, but there was no demo available so I wasn't really sure what you were trying to do. That's another reason we need demos to offer the best assistance.

 

Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

Okay okay. So, in this case its best to just have two separate timelines without connection to master(no need for master)?

Thank you. Learning a lot! Very passionate about this stuff so everyones guidance really means a lot and because of it I'm improving.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×