Jump to content

Narendra Verma

Overlay end and slide from left to right on mouse leaves

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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.


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

Link to comment
Share on other sites

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 ...




Link to comment
Share on other sites

Thanks for the reply Mikel


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


Link deleted


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


Link to comment
Share on other sites

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





  • Like 3
Link to comment
Share on other sites

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>



  • 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! :)


  • Like 4
Link to comment
Share on other sites

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.



  • Like 7
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.



  • Like 4
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.