Alternatives to Mouse Out

[ainsley_clark]

Hi all,

 

Very new to GSAP, but it seems like an excellent tool.

 

A very simple question, one which has probably been covered but I cant seem to find it.

Im animating a div class that has a name in it (.name).

I want some animation to occur when the user rolls over it (scaleup), at the moment I have a mouse out function but would much prefer for the name to expand and then go back to the original size using only a mouse over.

Basically I'm trying to rid of the mouseout function so it scales up, then down, without the userof timelineMax.

 

Many thanks in advance.

 

    $(document).ready(function(){
        $('.name').mouseover(function (e){   
            TweenMax.to($(this), .6, {
                scaleX: 1.2, 
                scaleY: 1.2, 
                ease:Elastic.easeOut
            });
        })
        $('.name').mouseout(function (e){   
            TweenMax.to($(this), .6, {
                scaleX: 1, 
                scaleY: 1, 
                ease:Elastic.easeOut
            });
        })
    });

 

[Carl]

Hi and welcome to the GreenSock forums,

 

If I understand correctly you can make the element return to its normal size without using a Timeline or a mouseout.

A single TweenMax tween can repeat and go back to where it started.

I used a separate yoyoEase for the return animation.

I am also using a repeatDelay so you can see where the forward animation ends and the repeat (yoyo) begins. You can remove the delay and yoyoEase if you like

 

$(".red").mouseover(function(element){
  TweenMax.to(this, 1, {scale:1.5, ease:Elastic.easeOut, yoyoEase:Power2.easeOut, repeat:1, repeatDelay:0.2})
})

 

 

See the Pen rZJyWy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

 

[ainsley_clark]

Thats perfect Carl, thank you very much for your help.