Timeline i

[Gazzawazza]

Hi all, first of all apologies in advance if my code is -- well, lets say not very good but....
I have something working but falls over in a couple of places.

1) I am unsure how to stop / reset a timeline playing when another starts i.e if I click on the next tab before the current tab has finished playing its timeline, the new tabs timeline shifts the css down and both previous and new timelines play.

This only happens if I click the next tabs too quickly.

 

I am aware that I can somehow kill or stop other timelines but cannot figure how to implement this or if I am barking up the wrong tree.

Please can you point in in the right direction??

Also, 
2) Adding timescale to the reverse functions doesn't work  - I have left an example of the timeScale issue in function rev3()

e.g. function rev3() { 
   tl3.reverse().timeScale(3);
} ;

https://greensock.com/docs/v2/TimelineMax/timeScale()

See the Pen gOrWVwm by Gazzawazza (@Gazzawazza) on CodePen

[PointC]

I'm having a hard time understanding the question here. What exactly is supposed to happen when you click a tab? 

 

I looked at your code and there's a lot of repetition in your if/else statements so I think this may be easier with loops, but I'm just not clear on what should happen. Can you simplify the demo a bit or give a better description of the desired result?

 

Thanks.  

[Gazzawazza]

Thanks for the reply.

 

Each if statement is relative to its own tab as defined by the index. if index == 0 then play timeline, etc.
Unsure how to simplify that further, not saying it can’t be, just that I don’t know how to yet. (still a lot to learn)

 

However, The  problem is if the tabs are clicked too quickly, I.e quickly from one to the other the previous tabs timeline doesn’t stop plying and often there is a break the css formatting e.g instead of the tabs.

 

the effect when working is as it it’s in the code pen if clicked slowly, however, The problem is created when clicking from one tab to the next quickly, the css positions shift.

 

also the 2nd problem is when 

Adding timescale to the reverse functions doesn't work  - I have left an example of the timeScale issue in function rev3()

e.g. function rev3() { 
   tl3.reverse().timeScale(3);
} ;

 

thanks Gareth

 

[PointC]

Can you give us a description of what's supposed to happen?

 

For example: If tab one is open and box 1 is animating from right to left and then I click 'Two", what should happen? Is the box 1 timeline supposed to reverse, pause() or what? The grey content area is the same for each. I'm assuming there will be other content in there? What happens to that on each click? Does it to just switch to the new tab. Does it fade out and the grey box scales back up to height:0 and then the next section is revealed? I'm just not following what you'd like to happen.

 

Thanks.

 

[Gazzawazza]

Hi thanks for the reply.

To clear up problem one.
Things are happening they way should until you click from tab one to the next tab too quickly and then the formatting breaks.

When you click from tab 1 to 2 to 3 quickly you will see the css formatting drop, E.g. instead of the grey content boxes opening from the same point below the tabs, sometimes they open further down the page. It’s as if when tab 1 to tab 2 to tab 3 are pressed too quickly their relative timelines are not cleared or stopped and so the next tab opens up under the the previous instead of inline, sometimes the grey content boxes disappear.

 

Easiest way to see the problem is randomly click tabs quickly and the formatting change will be evident.

 

 

 

[Gazzawazza]

I have recorded a screen shot of the problem.
The short video starts with clicking slowly from tab to tab then I speed up the random clicks 

You will see the formatting drop from being inline and also disappear.
The .mov is at the url below

shorturl.at/btJ36

 

Much appreciated
Gareth

[ZachSaucier]

Hey @Gazzawazza. You're making a couple of the most common GSAP mistakes. I highly recommend reading the common mistakes article  

 

 

You should setup your three animations outside of your event listeners and then just call .play(0) inside of the event listener (as well as hiding the other sections, perhaps using a .set()). I talk about that some in the article above but more extensively in my article on animating efficiently which I highly recommend as well.