Jump to content
GreenSock

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

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

Recommended Posts

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

  • Thanks 1
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
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 post
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 post
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 post
Share on other sites
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?

  • Haha 1
Link to post
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 post
Share on other sites

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

  • Like 1
Link to post
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 post
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.

×