AsKadir Posted June 23, 2020 Share Posted June 23, 2020 Hi! I have a simple example, my circle has a black border-color, on mouseenter in my timeline I'm changing its color, but on mouseleave I can't get it back, I have a decision, but it's not well looking, maybe there is a feature that I don't know. Can you help me, please? See the Pen vYLKrLQ by ChicagoJostik (@ChicagoJostik) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 23, 2020 Share Posted June 23, 2020 Hey Aslan. That pen seems to reverse the colors properly. What's your question? Side note: you could just use one tween for both of those animations... Link to comment Share on other sites More sharing options...
AsKadir Posted June 23, 2020 Author Share Posted June 23, 2020 Hi, Zach! 2 minutes ago, ZachSaucier said: That pen seems to reverse the colors properly. What's your question? No, I have a black border-color, on mouseenter I'm changing it to white, but on mouseleave I'm getting blue border-color, not my black that I had before. Can you look again, please? Link to comment Share on other sites More sharing options...
AsKadir Posted June 23, 2020 Author Share Posted June 23, 2020 5 minutes ago, ZachSaucier said: Side note: you could just use one tween for both of those animations... and can you give me example of what you mean by one tween?) Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 23, 2020 Share Posted June 23, 2020 6 minutes ago, AslanGoi said: on mouseleave I'm getting blue border-color I'm not seeing that... Are you sure you're linking the correct demo? The border changes from black to blue on mouseleave? 6 minutes ago, AslanGoi said: can you give me example of what you mean by one tween? .to(".box", { duration:0.3, backgroundColor:"#f03", borderColor:"#fff" }) Link to comment Share on other sites More sharing options...
AsKadir Posted June 23, 2020 Author Share Posted June 23, 2020 9 minutes ago, ZachSaucier said: .to(".box", { duration:0.3, backgroundColor:"#f03", borderColor:"#fff" }) Never mind about this, my brain doesn't want to think, let's imagine we have a lot of codes and inside box I have another box)) This demo link is right. Can you look again, please? So first state this with black border-color: Second state after mouseenter with white border-color: Third state after mouseleave this with blue border-color: And if you look at first and third states they aren't same, right? I can't understand why. So I had black border-color, but after mouseenter and mouseleave I have blue border-color. Does this make a sense? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 23, 2020 Share Posted June 23, 2020 1 minute ago, AslanGoi said: Third state after mouseleave this with blue border-color: I literally do not see that in your demo, hah. It goes back to state 1. What OS and browser are you using? 1 Link to comment Share on other sites More sharing options...
AsKadir Posted June 23, 2020 Author Share Posted June 23, 2020 7 minutes ago, ZachSaucier said: I literally do not see that in your demo, hah. It goes back to state 1. What OS and browser are you using? 😃 You're right, I tried in Google Chrome and Safari and everything is working, I'm using macOS Mojave 10.14.6, Mozilla Firefox 77.0.1 (64-byte). Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 23, 2020 Share Posted June 23, 2020 Good catch. This is a minor bug in GSAP. GSAP animates to a value of rgba(0, 0, 0, 0) in Firefox (notice the last 0 for alpha) whereas it should animate to rgb(0,0,0) or rgba(0,0,0,1). As a temporary work around you can use a .fromTo(): See the Pen NWxjOxw?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
AsKadir Posted June 23, 2020 Author Share Posted June 23, 2020 @ZachSaucier Thanks, Zach! Link to comment Share on other sites More sharing options...
GreenSock Posted June 24, 2020 Share Posted June 24, 2020 6 hours ago, ZachSaucier said: Good catch. This is a minor bug in GSAP. GSAP animates to a value of rgba(0, 0, 0, 0) in Firefox (notice the last 0 for alpha) whereas it should animate to rgb(0,0,0) or rgba(0,0,0,1). It actually has nothing to do with rgb()/rgba(). It's a Firefox bug. Try this in your demo: // Firefox bug - always reports computed border-color as ""! console.log(window.getComputedStyle(document.querySelector(".box")).borderColor); In other words, when GSAP tries to record the current/starting borderColor, Firefox literally reports it as NOTHING. So GSAP uses 0 for the rgba() values (it must use something, otherwise there could be no interpolation). I can add a workaround that senses when you're trying to animate borderColor and if it's nothing, it'll fall back to checking for borderTopColor. Seems to work well. You can see it in the next release which you can preview here: https://assets.codepen.io/16327/gsap-latest-beta.min.js 3 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