Hover effect

[nicolasdesle]

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.

 

[Rodrigo]

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.

[nicolasdesle]

Thanks Rodrigo!

 

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