Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Bug when reversing animation using GSAP3 in Firefox

Recommended Posts

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

Link to comment
Share on other sites

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.



  • Like 3
Link to comment
Share on other sites

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


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

Link to comment
Share on other sites

"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. 

  • Like 4
Link to comment
Share on other sites

Thanks for the tip & explanation.

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.