add multiple className to the same topic

[kit]

Hello Greensock,

 

I am trying to tween and add 2 className to the same element using greensock. Please refer to the codePen example, i would like to add .bkg-color & .bdr to the #element, but somehow the first added class is then replaced by the 2nd tween. Any advise will be appreciated

 

See the Pen QEAXBB by yengkit (@yengkit) on CodePen

[Rodrigo]

Hi,

 

I looked at your sample (thanks for providing a reduce case of the issue) and I'm a bit lost about it. So I'm getting in touch with the Animation Elder's Council seeking their wise advice in this matter .

 

An official answer is coming, please stand by.

[PointC]

So I'm getting in touch with the Animation Elder's Council seeking their wise advice in this matter .

Ha! That put an image in my head of the GreenSock Great Hall with giant green chairs at one end. "Jack and Carl will now hear your animation questions." 

 

I looked at this demo and was also confused. The only tween that seems to fire is the second one. If you add a tiny delay to one of them, they both work. I don't animate much of anything by adding and removing classes, but it seems like this should work.

[Carl]

Thanks for the solid effort guys.

 

I think this may be working as designed and is just an overwrite issue.

Imagine if you created 2 tweens at the same time that animated x to different values. Only one would be able to win the conflict (with overwrite auto).

 

However, it's a touch curious that the delay trick worked.

 

There are 2 other ways that seem to work fine:

 

//option 1
TweenMax.to("#element1",1,{className:"+=bkg-color bdr"});

//option2
TweenMax.to("#element2",1,{className:"+=bkg-color"});
TweenMax.to("#element2",1,{className:"+=bdr", overwrite:"none"});

 

http://codepen.io/GreenSock/pen/vKAWRK

[kit]

Hello all,

 

Thanks for the support, overwrite:"none" is what i am look for