Tonycre8 Posted July 9, 2021 Share Posted July 9, 2021 Good afternoon. I've got a bit of an issue I'm unsure of how to solve. I've got some code, and have put some styling onto my nav button by use of tailwind classes, and so my nav button looks like this: <div onClick={menuToggle} ref={el => {navIcon = el}} className="text-gray-800 z-50 fixed top-4 right-4 text-4xl cursor-pointer"> <Button /> </div> When I activate this , it'll pull out a nav menu, and because of the contrast I have tried to get it to also swap out the color of the text, so that the nav becomes white, like so: gsap.to(navIcon, {delay: .2, className: '+=text-white'}) however, when doing this, the div is changed in it's classes to this: <div onClick={menuToggle} ref={el => {navIcon = el}} className="text-white"> <Button /> </div> Why does adding the text-white simply remove all of the other classes? Not sure how to get it working where I can just add the class, rather than replacing all of the classes on the element. Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted July 9, 2021 Solution Share Posted July 9, 2021 Hi @Tonycre8, The className plugin was removed in gsap version 3. More info here: https://greensock.com/3-migration/#className 2 Link to comment Share on other sites More sharing options...
Tonycre8 Posted July 9, 2021 Author Share Posted July 9, 2021 10 minutes ago, elegantseagulls said: Hi @Tonycre8, The className plugin was removed in gsap version 3. More info here: https://greensock.com/3-migration/#className That would explain it, thanks a lot! 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