[setTimeout on hover before starting the animation]

Thanks @PointC, I'm looking into this.

[setTimeout on hover before starting the animation]

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

[setTimeout on hover before starting the animation]

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

[Wait function/tween to complete before being able to start another]

I've just found an easy solution ! I simply used pointer-events to disable the links for a period of time.

I add a pointer-events:none and change to "all" after the time of my animation. Also for the cursor for a "better" ux. 
 

        var OneAnimOnly = $(".link-menu" ).not(document.getElementById("prototypo"));
        TweenMax.to(OneAnimOnly, 0, {pointerEvents:"none" , cursor :"default"});
        TweenMax.to(OneAnimOnly, 0, {pointerEvents:"all" , cursor :"pointer" , delay:"1"});

 
Thanks guys for the help !

[Wait function/tween to complete before being able to start another]

Thanks @mikel, I'll give it a shot. I just thought that making work ".isActive" would have solved both issues.

[Wait function/tween to complete before being able to start another]

Thanks @mikel, it's really interesting what you've sent. It would be perfect if it didn't load all the previous "hover"s but only the last one. I thought that it would do the trick with setInterval but it doesn't seem so.

(Sorry for being a bit demanding)

[Wait function/tween to complete before being able to start another]

Hi guys, I screen recorded my project to illustrate my issue. 

 

(1.Hover between links ) At the beginning, I wait the animation to complete before hovering another link, then I go quickly on links.
http://leodurand.fr/digital/screen-record2.mp4

(2. Click on link) First in the video, you'll see the animation doing fine. The seconde time (page refreshed) is what can happen if the user hover another link after clicking.

http://leodurand.fr/digital/screen-video.mp4

Thank you for taking the time, hoping to be more understandable this time . ^^

[Wait function/tween to complete before being able to start another]

Thanks for answer but I'd really like the animation to show properly.

[Wait function/tween to complete before being able to start another]

Hi @PointC, thanks a lot for the links ! 

I think I get it how it works for the same Tween, but I'm lost about how to make it wait for the whole function and multiples tweens.  

Is there a way to get the function to wait without having to list all tweens into variable ?

 

 

[Wait function/tween to complete before being able to start another]

Thanks @mikel for your reply !

What I'd like is that the  (RED) .mouseover complete its animation before the (BLUE) can start. In your example, if I move my pointer quickly on the text, the images doesn't finish to appear and can looks buggy.
 

[Wait function/tween to complete before being able to start another]

Hi !
I'm starting with TweenMax and got stucked with an issue. I have a menu which each links can start an animation but they can overlap and make the tween bug. I'd like each function to complete before being able to start another one. I've found that I should use onComplete but I don't get what I am suppose to do then.

I've made a JSFiddle to demonstrate the issue I have.  On .mouseover, the tween start but if I hover too fast on an other link, it bugs. :/

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