Multiple timelines which animates the same element cause unexpected result

[RolandSoos]

Hi,

in this example I have two timelines and both has an animation which animates the same element in both tween. 

 

First:

• move y: 500 -> 0 and "set" rotationZ: 0
• When this timeline ends, play Second. (Imagine that the second timeline plays in the future when a specific event happens)

 

Second:

• rotationZ: 0 -> 45deg
• When this timeline ends, play the First again from the start.

 

Problem:

• When the first timeline plays again, the rotationZ is not set back to 0 and stays on 45deg which was set by the Second timeline.

 

 

Why the First timeline does not set rotationZ back to 0? 

 

If there is only one timeline, it works as expected:

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

 

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

[RolandSoos]

If I'm right, I just need to invalidate the first timeline: 

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

 

Which one is the better?

 

tl.play(0).invalidate();

 

tl.invalidate().play(0);

 

[Carl]

Hi RolandSoos,

 

Thanks for the demo, very helpful.

 

I'm a bit puzzled by this as I wasn't expecting the results you were seeing, and I don't think this is a case where you should have to use invalidate().

My first assumption in such a case is that the immediateRender of fromTo() tweens was causing an overwrite or something strange, but I don't think that is the case.

 

What I did find was that using values in both tweens instead of rotationX worked as expected. For instance if you change rotationX to rotation, I think it does what you want

 

See the Pen GXpeqb?editors=0010 by anon (@anon) on CodePen

 

We will have to investigate this a bit more and get back to you.

 

Carl

 

 

 

 

 

 

 

 

 

[Shaun Gorneau]

Hi @RolandSoos

 

I would have though clearProps:"all" as the first .set() on tl1 would have taken care of things ... but that doesn't do it either. ?

 

For some reason ... "rotation" works as opposed to "rotationZ".

 

 

See the Pen NLGoJW?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Edit: Sorry Carl ... didn't see you in there

[RolandSoos]

Thanks guys,

it is strange the rotationZ is the only one which does not work. For example rotationY works fine: 

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

 

So, it might be a bug in a GSAP and the example should work without invalidation. I will wait for the result of your investigation, until that I can use invaliate() as it fixes this issue temporary.

 

[Carl]

No problem, Shaun. Glad we came to same conclusion. Thanks for the help. 

[GreenSock]

Sorry about the confusion. Yes, it was a problem only with rotationZ (which is just an alias for "rotation" anyway). It should be fixed in the next release, due out within the next week or so. Here's a preview version (uncompressed) of TweenMax: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Better?