Jump to content
GreenSock

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

Hover effect

Recommended Posts

Hi 

 

I would like to create an effect where on hover on a span class with text in it, a line under the text gradually 'grows' underneath it. Like an underlined text, where the underline increases in width.

 

Here's the css:

 

.border {
        background-image: url('img/border.jpg');
        background-size: 0px 1px;
        background-repeat: no-repeat;
 }
 
Here's the HTML:
 
<span class='border'>my link</span>
 
And here's the (simplified) JS:
 
var textLinks = $('.border');
 
textLinks.each(function(index) {
 
            var targetItem = textLinks.eq(index);
 
            targetItem.on("mouseenter", function(event) {
                TweenLite.killTweensOf(targetItem);
                TweenLite.to(targetItem, 1, {css:'background-size:10px 1px', ease:Sine.easeOut});
            });
 
            targetItem.on("mouseleave", function(event) {
                TweenLite.killTweensOf(targetItem);
                TweenLite.to(targetItem, 1, {css:'background-size:0px 1px', ease:Sine.easeOut});
            });
});
 
On mouseenter everything works fine, the line animaties.
On mouseleave however nothing happens (although the mouseleave event is triggered when I log it in my console).
 
 
Anyone knows what the problem is?
Thanks.

 

Link to post
Share on other sites

Hi,

 

I'm not sure what could be the problem, I've forked your code and changed to this:

 targetItem.on("mouseenter", function(event) {
                TweenLite.killTweensOf(targetItem);
                TweenLite.to(targetItem, 1, {css:'background-size:100px 1px', ease:Sine.easeOut});
            });
 
            targetItem.on("mouseleave", function(event) {
                TweenLite.killTweensOf(targetItem);
                TweenLite.to(targetItem, 1, {css:'background-size:0px 1px', ease:Sine.easeOut});
            });

And the mouseleave tween worked fine, in other cases you just get a jump to the initial value.

 

Also there's a codepen of the Greensock collection that illustrates a very good use of over and out elements, but I couldn't find it (is not in the public collection), so I created one myself to illustrate a more simpler way, you can see it here:

See the Pen Kgace by rhernando (@rhernando) on CodePen

 

Hope this helps,

Cheers,

Rodrigo.

Link to post
Share on other sites

Thanks Rodrigo!

 

I just changed the css:'background-size:1px 10px' to backgroundSize:'20px 1px' and that does the job!

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.

×