GSAP CSSRulePlugin color not switching back

I created a hamburger menu toggle, which i am trying to make it change its color when 'dark mode' is active. Unfortunately it isn't quite working.

the pseudo elements aren't switching back once they changed. The '.hamburger' does.

.hamburger,
.hamburger::before,
.hamburger::after {
  //background: var(--clr-accent);     <--- original
  background-color: var(--clr-ham-toggl);
  width: 2em;
  height: 3px;
  border-radius: 1em;
  transition: transform 250ms ease-in-out;
}

.to('.hamburger', {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::before'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::after'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)

really appreciated, if someone could point me in the right direction.

EDIT: So, it is now working via its own variable. Like so:

<button class="nav-toggle" aria-label="toggle navigation">
      <span class="hamburger"></span>
    </button>

.to('.nav-toggle', {"--clr-ham-toggl": "#f6f6f6"}, duration * 0.5)

Solution

There are a couple of issues here. First, you are trying to get the rule for the backgroundColor but in CSS you have a rule for background. You should animate the same rule so that the rules don't conflict.

Second, you're applying a CSS transition but then trying to animate it with GSAP. This will cause performance issues because the transition will try to apply each update when it doesn't need to.

Additionally, I highly recommend that you use GSAP's defaults because it makes using timelines even easier.

Putting those changes together, it animates!

However, as mentioned in the comment above, we at GreenSock do not recommend that you use the CSSRulePlugin for animating pseudo-elements in most cases these days because CSS variables are easier to animate and have pretty good support. If the support is good enough for your use case use this approach instead.

FYI you're more likely to get an even faster reply over on the GreenSock forums.