Overlay end and slide from left to right on mouse leaves

[hybreeder 0 Likes (Newbie)]

Hello,

I have a button. When a user hovers over it then blue overlay will come and slide from left to right and stop until the mouse leaves. There is no issue here. It's working.

Now

If the user removes the mouse hover then I have to end the blue overlay from left to right and It will come on the normal button.

 

When I remove the mouse hover it's going to the right to left side.

Also when hover on the button "How can I change the color of text and arrow"?

 

Thanks in advance.

 

 

See the Pen JapPbV by Narendra_verma (@Narendra_verma) on CodePen

[mikel 1,823 Likes (Superhero)]

Hi @hybreeder,

 

I'm not sure what you want to achieve exactly.

Here is one option (z-index, another tween):

 

See the Pen KxQggV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[hybreeder 0 Likes (Newbie)]

Thanks for the reply Mikel

 

I am sharing you the reference link. Please check it.

 

https://takumi.com/

 

There Is a button called "Learn more" in the  "Instagram Experts" section. I need like this. I tried my side but not working.

 

[mikel 1,823 Likes (Superhero)]

Hi @hybreeder,

 

that could be something like this ...

 

See the Pen wEyaNp by mikeK (@mikeK) on CodePen

 

You need in this example two different timelines for enter and leave.

 

Best regards

Mikel

 

 

 

[Jonathan 5,176 Likes (Superhero)]

Hello @hybreeder and welcome to the GreenSock Forum!

 

For color mouse hover text color.. this should be as simple as just positioning your elements within the anchor tag with z-index.

 

Forking @mikel  codepen of your codepen.

• You should wrap your anchor tag (.tbtn) text with a <span> tag
• Give that span CSS position: relative and z-index: 2

.t_btn span {
  position: relative;
  z-index: 2;
}

 

<a href="javascript:void(0);" class="t_btn btn_bg t_btn_about">
    <span>Hover me</span>
    <div class="hover_overlay"></div>
</a>

 

Then:

• give .hover_overlay a z-index of 1. (never use negative z-index like -1, since it doesn't work cross browser, only use positive z-index values)

 

See the Pen PdQWYJ by jonathan (@jonathan) on CodePen

 

Happy Tweening!

 

[PointC 8,599 Likes (Superhero)]

As @mikel mentioned, you'll probably want two timelines as this animation is not a reverse() situation. One other option would be to create one timeline and then addPause() at the halfway point. Then resume() when the mouse leaves. Something like this should work.

 

See the Pen oPELMe by PointC (@PointC) on CodePen

Happy tweening.

 

[hybreeder 0 Likes (Newbie)]

WOW!! Thanks PointC,

 

Exactly I need like this only. I just need a little bit more help in this. When hover on a button can we slider arrow as well?" something like in the reference.

[PointC 8,599 Likes (Superhero)]

I prefer SVGs for my little icons so I'd probably do it like this.

 

See the Pen GXQWJw by PointC (@PointC) on CodePen

Happy tweening.