Jump to content
Léo Durand

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

  • Like 2

Share this post


Link to post
Share on other sites

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.
 

screenshot-tween.gif

Share this post


Link to post
Share on other sites

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.

:)

  • Like 3

Share this post


Link to post
Share on other sites

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 ?

 

 

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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.

:)

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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 !

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.