ohem Posted August 5, 2020 Share Posted August 5, 2020 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 More sharing options...
PointC Posted August 5, 2020 Share Posted August 5, 2020 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. 3 Link to comment Share on other sites More sharing options...
ohem Posted August 5, 2020 Author Share Posted August 5, 2020 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 More sharing options...
GreenSock Posted August 5, 2020 Share Posted August 5, 2020 "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. 4 Link to comment Share on other sites More sharing options...
ohem Posted August 5, 2020 Author Share Posted August 5, 2020 Thanks for the tip & explanation. 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