Léo Durand

Thanks @PointC, I'm looking into this.

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

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 !

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 !

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

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)

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 . ^^

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

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 ?

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.

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