Jump to content
GreenSock

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

Calling multiple timelines...

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

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();

       
    });

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

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.
×