Add new class not working?

[ShadowHax]

Hello All!

This should be pretty straight forward, but I'm having trouble adding a new class.

I've attached my CodePen example.  Can anyone point me in the right direction to what I am doing wrong?

 

The example should change all the box colors from Blue to Green, then add the .blackBox class to the third box, then change all boxes without the .blackBox class to Red, leaving the third box Black.

 

Any input would be greatly helpful!

See the Pen jObbedy by lithiumhax (@lithiumhax) on CodePen

[PointC]

Check out this thread:

 

[ZachSaucier]

By the way, your JS will run faster and more performantly if you just use selector strings for your targets:

tl.set( '#box3', { // ...

tl.to( '.box:not(.blackBox)', { // ...

Using jQuery just slows things down, not to mention adds load time  

[ZachSaucier]

I think this is the effect you're going for? 

See the Pen GRppwBN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I think GSAP caches the target references when tweens are initialized, so you should wait to create the new tween until after the className has been changed. 

[ShadowHax]

Thank-you so much for the tips!!!

I can style the 3rd box without using the class, I guess I'm trying to figure out the best way to use .not on the boxes.

I thought I could maybe just add the .blackBox class to the third box, then use .not('.blackBox') to change them all but the third to Red.

I'm probably doing a terrible job explaining myself lol, but thank-you for all the help.

[ShadowHax]

26 minutes ago, ZachSaucier said:

I think this is the effect you're going for? 

 

I think GSAP caches the target references when tweens are initialized, so you should wait to create the new tween until after the className has been changed. 

 

Very helpful!  Thank-you!

 

[ZachSaucier]

3 minutes ago, lithiumhax said:

I can style the 3rd box without using the class, I guess I'm trying to figure out the best way to use .not on the boxes.

If you know which box is different at the start just use that info:

See the Pen gOaaZMX?editors=0010 by GreenSock (@GreenSock) on CodePen