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

[Léo Durand]

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.

[mikel]

Hi @Léo Durand,

 

Welcome to GreenSock Forums.

 

Perhaps this PEN gives suggestions on how to solve overlap. The key: both animations in one mouseenter function.

 

See the Pen KvNvjP by mikeK (@mikeK) on CodePen.

 

For your purpose: The current / running Tween will be 'reversed' fast / faster and the next could start with a delay (= time of the 'reverse'):

 

  if($thisPage.length) {
    TweenLite.to($page.not($thisPage), 0.4, {xPercent:-100}); // faster
    TweenLite.to($thisPage, 0.8, {xPercent:0, delay:0.4});  //starting at 0.4

 

Hopefully it is helpful ...   Best regards

Mikel

 

[Léo Durand]

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.
 

[PointC]

Hi @Léo Durand

 

Welcome to the forum.

 

If you want to prevent a new animation from triggering while another is playing, you can check that with the isActive() method. Here's some more information:

https://greensock.com/docs/TweenMax/isActive()

 

If it's just one particular object you'd like to check, you can also use the isTweening() method. 

https://greensock.com/docs/TweenMax/static.isTweening()

 

In either case, you can prevent any new animations from playing by performing this check. Hopefully that helps.

 

Happy tweening.

[Léo Durand]

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 ?

 

 

[mikel]

Hi @Léo Durand,

 

This could be a solution if you like fruits:

 

See the Pen Nvdvry by mikeK (@mikeK) on CodePen.

 

Try to varying timing, delay and easing for your feel ...

If user too fast it could be still a problem.

 

 

Kind regards

Mikel

 

 

[Léo Durand]

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

[PointC]

Just so I understand what you're trying to do I have a couple questions.

 

If you hover over button 1, the animation for that button plays and hovering over any other buttons shouldn't work until that animation completes, correct? Once that animation completes, if you hover over button 2 (or any other button), what happens? Does animation 1 have to reverse itself or does it stay in the animated state? If it reverses itself, does it have to complete before animation 2 can play or is it reversing while the next animation starts?

 

Personally, from a user perspective, I like what @mikel has in his demo. From what I understand, you're making something that operates similarly to a drop down or slide out menu? I would think the user may hover on/off quickly to see what's going to happen and may not want to be forced to wait. That's just my two cents worth though. 

 

If you could let us know what should be happening on the subsequent rollovers (preferably with a new demo) that would be helpful in pointing you towards a solution.

 

Happy tweening.

 

 

[mikel]

Hi @Léo Durand,

 

after another cup of coffee ...

 

Using timeout for mouseenter - test it local if you want:

 

See the Pen vJgWmo by mikeK (@mikeK) on CodePen.

 

Its more just for me - kind regards

Mikel

 

 

[Léo Durand]

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

[Léo Durand]

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)

[mikel]

Hi @Léo Durand

 

12 hours ago, Léo Durand said:

The seconde time (page refreshed) is what can happen if the user hover another link after clicking.

 

You could solve this setting a flag. That could be done by normal js logic - like in this example founded in the GreenSock forum:

 

See the Pen ALaBAK by GreenSock (@GreenSock) on CodePen.

 

Kind regards

Mikel

[Léo Durand]

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

[Léo Durand]

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 !