Calling multiple timelines...

[LewisOne]

I'm trying to understand what I'm not doing right.  I can get this to work with one timeline and reverse, but when I add another timeline it does nothing.  Any ideas on the concept.

 

var tlone = new TimelineMax();

var tltwo = new TimelineMax();

 

$("#buttonone").click(function() {
tlone.to(homePage, 2, {somestuff})
.to(servicePage, 2, {morestuff})

 

tltwo.reverse();
    });
    
$("#buttontwo").click(function() {
tltwo.to(homePage, 2, {somestuff})
.to(servicePage, 2, {morestuff})

 

tlone.reverse();

       
    });

[LewisOne]

I don't really like the solution, but I figured out if I did this it seems to work:  my goal is for the other animation not to play in the beginning.  It works, but Is this a good solution or is there a better way???

 

var tlHome = new TimelineMax();
var tlService = new TimelineMax();
tlHome.play();
tlService.pause();
    
tlHome.to(coolStuff)
    
tlService.to(coolStuff})

 

$("#buttonone").click(function() {
tlone.play();

tltwo.reverse();
    });
    
$("#buttontwo").click(function() {
tltwo.play();
tlone.reverse();

 

 });

 

I think that I figured out that i need to only use the buttons to play, reverse, pause, etc.

[Carl]

Hi, Sorry to hear you are having trouble.

 

Not really sure what you are trying to accomplish. 

 

The way things are set up you are adding new tweens to 2 timelines each time a button is pressed. Which will result in the duration of all the timelines getting longer and longer and they will be filled with many tweens.

 

What makes things a bit odd is that you are also reversing both timelines but you never tell them to play() forward. 

 

This is only a guess but I would suggest you construct both timelines outside of any button code and simply use the buttons to play and reverse the proper timelines.

 

keep in mind if you reverse() a timeline that has never played, nothing will happen. 

Pro Tip: You can use timeline.reverse(0) to reverse it from the end.

 

I would suggest using codepen of jsfiddle to create a very simple example and provide detailed instructions of the behavior you are trying to create.

 

You can simply fork this codepen example and start building something that replicates your file: http://codepen.io/GreenSock/pen/zwxbv

[LewisOne]

Ok, I'm doing things correct then.  At first, I was trying to put everything into the button code that I wanted it to do (like I do in AS3) and then just duplicate it for my second button with new things going on.  I didn't relaise that the actions have to be outside the buttons and now that I only use the buttons to play/reverse/pause/etc it works like a charm.

I was also stuck on how to make only one work onLoad.  I stumbled upon in frustration (trying stuff randomly) that I can pause the timeline at the beginning of the code to get it to stop playing, lol.

 

Thanks for your encouragement and feedback, you are my fertilizer to make my webGardening easier.