Jump to content
Search Community

How to return colors that I had after reverse()?

AsKadir test
Moderator Tag

Recommended Posts

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

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

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:

1132234241_2020-06-243_54_27.png.554be9e88310212f8ac8ecf42727b703.png

Second state after mouseenter with white border-color:

1229816206_2020-06-243_54_39.png.df2c5321aafdab078dc7e88a9153fb46.png

Third state after mouseleave this with blue border-color:

542562559_2020-06-243_54_53.png.60a33a7baa8d4154c82238262649122a.png

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

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

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

  • Like 3
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.
×
×
  • Create New...