Jump to content
GreenSock

kit

add multiple className to the same topic

Recommended Posts

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

Link to comment
Share on other sites

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 :D.

 

An official answer is coming, please stand by.

  • Like 2
Link to comment
Share on other sites

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

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."  :lol:

 

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.

  • Like 1
Link to comment
Share on other sites

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"});
 
  • Like 5
Link to comment
Share on other sites

Hello all,

 

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

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.
×