Jump to content
Search Community

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

Léo Durand test
Moderator Tag

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

Link to comment
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
Link to comment
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
Link to comment
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 ?

 

 

Link to comment
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
Link to comment
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 . ^^

Link to comment
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
Link to comment
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
  • Thanks 1
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.
×
×
  • Create New...