Jump to content
Search Community

onStop() if timeline is reversed (to replace onComplete not being called)?

annam 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 have a simple fadein-fadeout animation, which is triggered on mouseover-mouseout. here's the sample code:
 

onmouseover = function(){
    TweenMax.to('#id', 1, { 
        autoAlpha: 0.5, 
        onComplete: function(){
            // some background stuff handled here
        }
    });
}

onmouseout = function(){
    TweenMax.to('#id', 1, { 
        autoAlpha: 1, 
        onComplete: function(){
            // some background stuff handled here
        }
    });
}

this works great, and the onComplete function triggers as expected, unless the onmouseout function is triggered because the onmouseover transition has enough time to complete.

 

when this happens, the oncomplete function for the mouseover event, does not trigger. I guess because it never completes :) however i really need the stuff going on in that function to run! 

 

is there something similar to a onStop() or onInterrupted event where I can also trigger these? I dont want to use onReverse() - the onmouseout animation may be animating to a different opacity so that wont work. Triggering the oncomplete stuff on mouseout wont work either.. 

 

so the question is, is there a way (callback?) to detect whether the animation has been interrupted before completion?

 

thanks

 

 

Link to comment
Share on other sites

Hi and welcome to the forums.

 

You could use an onStart callback for the mouse out tween, with a conditional logic in it, therefore if the mouse in animation didn't complete the onStart call will execute, if the mouse in animation did complete the onStart call won't execute. Something like this:

var isComplete = false;

onmouseover = function(){
    TweenMax.to('#id', 1, { 
        autoAlpha: 0.5, 
        onComplete: function(){
            isComplete = true;
            // some background stuff handled here
        }
    });
}

onmouseout = function(){
    TweenMax.to('#id', 1, { 
        autoAlpha: 1, 
        onComplete: function(){
            // some background stuff handled here
        },
        onStart: function(){
            if(!isComplete)
            {
                isComplete = false;
                //code here
            }
        }
    });
}

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

One other technique would be to simply decouple the onComplete from the tween itself so that it gets called either way. For example:

TweenMax.to('#id', 1, {autoAlpha: 0.5});
TweenMax.delayedCall(1, function() {...});

Or you could use a TimelineLite sequence:

var tl = new TimelineLite();
tl.to('#id', 1, {autoAlpha: 0.5}).call(function() {...});

Same idea. 

  • Like 1
Link to comment
Share on other sites

One other technique would be to simply decouple the onComplete from the tween itself so that it gets called either way. For example:

TweenMax.to('#id', 1, {autoAlpha: 0.5});
TweenMax.delayedCall(1, function() {...});

Or you could use a TimelineLite sequence:

var tl = new TimelineLite();
tl.to('#id', 1, {autoAlpha: 0.5}).call(function() {...});

Same idea. 

 

 

the first idea sounds great, it should work! and its pretty clean too.. thanks :)

 

the second suggestion, the timeline one, seems even better, but wouldnt the timeline be interrupted if the transition is revered? would the function still be called, and the timeline sequence continued, if the first transition never completes?

 

thanks a lot (to both!) ill try the suggested solutions later on and let you know!

Link to comment
Share on other sites

The only way the TimelineLite one wouldn't call the function is if you literally reverse() the TimelineLite instance, but your code seemed like you were just creating a new instance each time to effectively reverse the animation (but not really reverse() the instance itself). So the overwriting kicked in and killed that tween. Killing a tween inside a TimelineLite doesn't cause the TimelineLite to be killed. 

 

Does that clear things up?

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