Disable animation trigger while animation is active.

[mGorchev]

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

 

[Michael71]

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.

[mGorchev]

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);
        }
    });
};

[Michael71]

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.

[Carl]

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/

[mGorchev]

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

[Diego Gnoatto]

On 12/16/2014 at 8:48 AM, Michael71 said:

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.

i had a timeline doing weard things on double click fast, this worked for me