Jump to content
Search Community

GSAP to classname removes all other previous classes

Tonycre8 test
Moderator Tag

Go to solution Solved by elegantseagulls,

Recommended Posts

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

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.
×
×
  • Create New...