Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Léo Durand

setTimeout on hover before starting the animation

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

Hi ! 

I'm trying to add a setTimeout on hover to avoid a bug when the mouse is going fast on links.

I tried a simple setTimeout but nothing
 

setTimeout(function over(){
  TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"})
  TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"});
  TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut});
}, 200);


and also with this code but didn't find to make it work...

 

$(document).ready(function(){
    var delay=200, setTimeoutConst;
    $('.thumb').hover(function(){
        setTimeoutConst = setTimeout(function(){
            $(".thumb").hover(over, out);
            function over(){
                TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"})
                TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"});
                TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut});
            }
            function out(){
                TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut})
                TweenMax.to($(this).find(".view_thumb"), 0.2, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut})
                TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"0" , ease:Power2.easeOut});
            }
        }, delay);
    },function(){
        clearTimeout(setTimeoutConst );
    })
})


If you have any idea I would be really glad.

Thanks !

See the Pen eeYGrO by leodurand (@leodurand) on CodePen

Link to comment
Share on other sites

Hi @Léo Durand ,

 

What do you think of this construct?
The necessary animations are only controlled via mouseenter:

 

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

 

Happy tweening ...

 

Mikel

  • Like 1
Link to comment
Share on other sites

Hi @Léo Durand :)

 

For something like that, I'd recommend giving each element its own timeline which can play/reverse on hover. That way nothing gets 'stuck' when you hover on/off too quickly. Something like this:

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

Hopefully that helps. Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Thanks a lot for the answers.

@PointC : It's clearly more fluid, but I like that the mouseOver is different that mouseOut but it's clear I'm gonna use it for some other project! Is there a way to keep both animation and make it individual like in your code ?

@mikel : Thanks Mikel, but this code is a bit to heavy for me, I don't understand it very much. :/

Link to comment
Share on other sites

If you want a different animation for the reverse, I'd take a look at this recent post by @Carl. That one is dealing with a click, but you can make it work with hover as well.

 

Happy tweening.

:)

  • Like 3
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.
×