Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mGorchev

Disable animation trigger while animation is active.

Recommended Posts

Hello, I'm sorry if this question is being discussed already, i couldn't  find anything in the documentation or the forum. 

Basically i have a button with which I'm triggering a background-position animation on a DOM element with lets say 240px. Everything is working fine there. The problem is if i click the trigger button while the animation is active, its start again and the background is moved 240+ pxls, depends how quickly I have clicked the second time.

 

Is it possible to ignore clicks on the trigger while animation is running ?

I've tried the following with no luck:

 

var tl = TweenLite.to(element, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut});
if(tl.isActive()){
    return false;
}

Thanks in advance!

M. Gorchev

 

  • Like 1
Link to comment
Share on other sites

Try this:

var tl = TweenLite.to(element, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut});

$("#button").on("click", function(e){
 if(tl.isActive()){
 e.preventDefault(); // this will also stop <a> tag links
 e.stopImmediatePropagation(); // this will stop event bubbling

 return false;
}
});

Basically you need to check if the animation is running from inside the event trigger callback and cancel it.

Link to comment
Share on other sites

Hey, thanks for the suggestion, but it didn't work, im doing everything inside the event handler anyway, please see the full function, its really custom, but you'll get the point.

 

Essentially i have the Tween inside the event handler, because on click i need to get some data and construct the Tween base on it.

 

I've put your suggestion on one of the possible scenarios (when 'next' is clicked):

var phoneSlide = function(){
    $('.phone-control').on('click', function(e){

        var _this = $(this),
            parent = _this.closest('#outer-target'),
            slide = parent.find('.screen-slides'),
            index = +slide.attr('data-tooltip-info'),
            slideBgPosition = slide.css('background-position').replace(/%/g, '').split(' '),
            leftPosition = +slideBgPosition[0].slice(0, -2),
            slideWidth = 254,
            newPosition, prevTooltip, tl;


        if(_this.hasClass('next')){
            newPosition = leftPosition - slideWidth;
            tl = TweenLite.to(slide, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut});
            if(tl.isActive()){
                e.preventDefault();
                e.stopImmediatePropagation();
                return false;
            }
            index !== 5 ? index++ : index = 1;
            slide.attr('data-tooltip-info', index);
            prevTooltip = $('#screen-info-' + (index - 1));
            prevTooltip.length ? prevTooltip.css('opacity', 0) : $('#screen-info-5').css('opacity', 0);

            $('#screen-info-' + index).css('opacity', 1);

        }
        else if(_this.hasClass('prev')){
            newPosition = leftPosition + slideWidth;
            tl = TweenLite.to(slide, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut});
            if(tl.isActive()){
                return false;
            }
            index !== 1 ? index-- : index = 5;
            slide.attr('data-tooltip-info', index);

            prevTooltip = $('#screen-info-' + (index + 1));
            prevTooltip.length ? prevTooltip.css('opacity', 0) : $('#screen-info-1').css('opacity', 0);

            $('#screen-info-' + index).css('opacity', 1);
        }
    });
};
Link to comment
Share on other sites

The duration of the tween is extremely fast to practically capture the active state.

Have you tried this scenario with a duration of 2-3 seconds? So that the click is properly triggered while the tween is animating?

 

Also where is the "next" class added? Is it ever going inside the first "if" statement?

 

You could post a codepen example, so that we can test and apply different solutions.

Link to comment
Share on other sites

As Michael noted, a CodePen demo would certainly be helpful. It just needs enough code to illustrate the issue as explained here:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

From a glance it looks like your order of operations is a bit upside down. From what you are describing, you should only create a new animation if the current one is not active. It looks like you are creating new animations before even checking the isActive() state. 

There are a few ways of solving this, but this is a very simplistic implementation of using isActive():

http://codepen.io/GreenSock/pen/Pwzomo?editors=001

 

$("#tweenBox").click(function(){
  if(!tween.isActive()){
    //only reverse the direction if the tween is not active
    tween.reversed(!tween.reversed())
  }
})

 

Notice that tween is only told to reverse if tween is not active.

 

Also, there is an isTweening() method that checks to see if an object is being tweened... that may help too.

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isTweening/

  • Like 1
Link to comment
Share on other sites

Guys, thanks for the hints, great support, i think the problem is that a certain problem can be solved in many possible ways (if that is a problem thought :D)! I manage to solve it using the TweenMax onStart and onComplete callbacks and setting animationState variable to true or false inside them

...
if(animationState !== true){
   newPosition = leftPosition + slideWidth;
   tl = TweenMax.to(slide, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut,
         onStart: function(){
               animationState = true;
         },
         onComplete: function(){
               animationState = false;
         }
    });
   ....
}
...

Thanks again! Marked as solved

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