Jump to content
Search Community

How to toggle multiple timelines

mrowka3d test
Moderator Tag

Go to solution Solved by Carl,

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 fellow animators.

 

I've been learning g sock for about a week now and I got stumped. So, I figured I'd join you guys who are all way smarter then me :)

 

In my first project, I'm working on a hidden navigation that reveals on user interaction. My codepen is what I've got so far.

 

I have my first animation button that opens fine, but I can't quite figure out how to get my timeline 3 to close it back to its initial state. ('tl3.reversed(!tl3.reversed())' is not working for some reason.)

 

Any way, I thought I'd give these forums a try,

thanks for reading,

gregg

 

See the Pen zwrEEv by mrowka3d (@mrowka3d) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the GreenSock forums,

 

Thanks for the demo and helpful instructions.

 

try adding

tl3.reverse(); 

after you create the timeline

https://codepen.io/GreenSock/pen/pPgxBo?editors=1010 (line 17)

 

this way the first time click and you set tl3.reversed(!tl.reversed) the animation will play forward

 

Just a tip, to make demos easier to debug its helpful to use descriptive names so:

 

tl1 could be moveAnimation

tl2 could be pulseAnimation

tl3 could be openAnimaiton

  • Like 1
Link to comment
Share on other sites

Hi Carl. Thanks for taking a look. And yes, I was going to make better timeline names, but time got away from me. I will give that my utmost.

 

I do have to admit, your solution does work, but, if you don't mind, can I ask a follow up?

 

How the heck is there two timelines with the same name? Is there any documentation/demos that can help me visualize what's going on there? Is the second timeline just added at the end of the first one? Do they just kind of merge together?

 

Thanks for your help,

gregg

Link to comment
Share on other sites

Sorry, I don't understand the question. Which 2 timelines have the same name? Currently there are 3 separate timelines that you are controlling independently of each other (no merging).

 

Can you isolate the line of code that is puzzling?

Link to comment
Share on other sites

Sorry, I don't understand the question. Which 2 timelines have the same name? Currently there are 3 separate timelines that you are controlling independently of each other (no merging).

 

Can you isolate the line of code that is puzzling?

I'm sorry as well. In our code we have tl3 on line 12 and 17. I was just wondering what was going on because it looks to me that we have to separate timelines with the same name. So, I'm guess that they are both merged into one timeline. that's my guess and I was just wondering if you could confirm that :)

Link to comment
Share on other sites

Hi mrowka3d  :)

 

There aren't two timelines. Carl is just putting the tl3 timeline into a reversed state so the first time you click it will play forward. It's not creating or merging any new timelines. It's like tl3.pause() or tl3.play() or setting the progress of a timeline like tl3.progress(0.5). Those are all just ways to get or set various values for your timelines.

 

Does that help?

 

Happy tweening.

:)

Link to comment
Share on other sites

Sorry, I don't understand the question. Which 2 timelines have the same name? Currently there are 3 separate timelines that you are controlling independently of each other (no merging).

 

Can you isolate the line of code that is puzzling?

OK, this will help what I'm understanding:

 

Is this:

tl3.pause()
  .addLabel("start")
  .to("#dot1_center", 1.5, {scale: 4, y: -15, x: -15, repeat: 0, ease: Elastic. easeOut.config( 1, 0.3)}, "start")
  .to("#dot1_close", 1.5, {fill: "white", repeat: 0, scale: 4, y: -9, x: -9, ease: Elastic. easeOut.config( 1, 0.3)}, "start");
 
tl3.reverse();

the same as this:

tl3.pause()
  .addLabel("start")
  .to("#dot1_center", 1.5, {scale: 4, y: -15, x: -15, repeat: 0, ease: Elastic. easeOut.config( 1, 0.3)}, "start")
  .to("#dot1_close", 1.5, {fill: "white", repeat: 0, scale: 4, y: -9, x: -9, ease: Elastic. easeOut.config( 1, 0.3)}, "start")
  .reverse();
Link to comment
Share on other sites

Hi mrowka3d  :)

 

There aren't two timelines. Carl is just putting the tl3 timeline into a reversed state so the first time you click it will play forward. It's not creating or merging any new timelines. It's like tl3.pause() or tl3.play() or setting the progress of a timeline like tl3.progress(0.5). Those are all just ways to get or set various values for your timelines.

 

Does that help?

 

Happy tweening.

:)

 

thanks for the explanation @PointC.

 

It does make a little more sense. does my latest comment ring true? are they the same statements? Given this new information, are you saying that I could control the timeline in multiple locations? I just tried playing around with moving that line 17 to the bottom of @Carl's pen and it seems that my statement is true.

 

Cool ... right? :)

 

PS how does one tag a person's name like what you've done to my name?

Link to comment
Share on other sites

Yup - as Carl mentioned, both are the same. Yes - you can control the timeline from multiple locations. One button can pause it, another can control the speed etc.

 

To add someones name and link to their profile I just highlight the name and copy/paste into the post.

 

Happy tweening.

:) 

  • Like 1
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.
×
×
  • Create New...