Forking a timeline instance

[popClingwrap]

Morning, I am trying to build a timeline using TimelineMax that is just fading elements in and out. I want it to play through the first elements in sequence but then, depending on the number of the current loop, to show a different final frame each time round.

 

I have set up the simplest example I can in codepen

 

I wanted the animation to run - red, green, blue, red, green, pink on a loop - but this does not happen.

If the tl.play() on line 20 is set to 'blue' it just never shows the pink element at all and if the label is set to 'pink' it also ignores the blue element every other loop.

 

I just can't get it to branch as expected so firstly, am I going about this the wrong way or missing something basic?

Secondly, can anyone explain the behaviour I am getting and how I might make it run as I want?

 

Any details will be gratefully received even if they are not necessarily solutions as I don't really have a good picture in my head of exactly how GSAP runs and I want to understand its general flow better.

 

Cheers in advance

See the Pen epKgKP by anon (@anon) on CodePen

[Diaco]

Hi popClingwrap 

 

pls check this out : 

See the Pen PPaRWZ by MAW (@MAW) on CodePen

[popClingwrap]

Cheers Diaco,

that has sorted the issue and the way you have approached it is neater than what I was trying.

Do you have any pointers as to why mine was not working?

I'm trying to get some approaches and best practices solid in my mind regarding GSAP and failed code is a great way to learn if someone can point out why it failed

 

Thanks again though, I will stick your solution back into my build and see what catches fire next.

[Carl]

Hey PopClingWrap,

 

Although Diaco did a great job at finding a solution, we realized there was a bug in GSAP that would only occur in certain edge-cases.

It's a little bit complicated to explain but in your case you were calling seek() from your onComplete callback which immediately forced the playhead somewhere else which screwed up other calculations that had to be performed to properly render the frame that the onComplete callback fell on. 

 

 

Regardless of how much sense that makes, here is a fork of your demo with what I believe is the proper and expected behavior:

http://codepen.io/GreenSock/pen/WQaeqV?editors=001

 

And to be clear, your code was good. Thanks for making the demo.

 

Please note that it loads a beta of TweenMax which will go out in version 1.18.1.  

If you need it now, just grab it from: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?v=456

 

Sorry for the confusion and delay. Jack did a lot of work to track this down.

[popClingwrap]

I really appreciate the work being put in to investigate this. The workaround was fine but it's good to know I was coming at it from the right angle at least.

I'll have a proper look at the fork you posted at work tomorrow.

 

Thanks again for the awesome support