ShadowHax Posted April 14, 2020 Share Posted April 14, 2020 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 Link to comment Share on other sites More sharing options...
PointC Posted April 14, 2020 Share Posted April 14, 2020 Check out this thread: 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 14, 2020 Share Posted April 14, 2020 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 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 14, 2020 Share Posted April 14, 2020 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. 1 Link to comment Share on other sites More sharing options...
ShadowHax Posted April 14, 2020 Author Share Posted April 14, 2020 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. Link to comment Share on other sites More sharing options...
ShadowHax Posted April 14, 2020 Author Share Posted April 14, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 14, 2020 Share Posted April 14, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now