Bug when reversing animation using GSAP3 in Firefox

[ohem]

It's been a while since I used GSAP, but I'm using it again for a current project.

 

I've been using some variation of the same button rollover animation/reverse code for years, so I updated that for GSAP 3 and added it to my project.  Everything works fine in Chrome, but in Firefox (on a Mac), on mouseout, the button's background color disappears instead of changing back to its original color.  I put together a simplified example on Codepen here: 

 

Does anyone know how I can fix this?  Any help would be much appreciated!

 

See the Pen WNwNaMx by ohem (@ohem) on CodePen

[PointC]

I'd use background-color in the CSS instead of background and then adjust the tween accordingly.

// Button rollover animation
var hoverAnim = gsap.timeline({
        paused: true
    })
    .to("#cta-btn", 0.2, {
        backgroundColor: "#000",
        ease: "sine.out"
    }, 0);

Once I made that change, everything was working properly in Firefox for me.

 

Happy tweening.

 

[ohem]

Thank you for the extremely fast response!  That works perfectly.

 

(I wonder why "background" was causing problems though?)

[GreenSock]

"background" causes problems because it's a complex property that can have a bunch of different stuff shoved into it in various orders. Firefox reports the computed value differently than other browsers. It's a browser issue, not a GSAP issue. It's just much cleaner to use the individual properties like backgroundColor since there's no ambiguity. 

[ohem]

Thanks for the tip & explanation.