Clever Geek Handbook

How to stop Tweenmax animation during animation

I tried to stop the animation before finishing the animation in Tween-max. Initially the top div is "0px", I animate it to 90px in 3 seconds. If I press a button, I want to stop it. How do I get it?

    TweenMax.to("div",3, {
        top: '90px',

    }); 
    <div id="stop">stop</div>
+3


source to share


3 answers


You can use kill()

to remove animation.

JS: Removing animation.



 var tween:TweenMax = TweenMax.to("div",3, { top: '90px' }); 
 //then later...
 tween.kill();

Source

+3


source


To do this, you will need to use the TimeLine from GSAP.

A simple example of how you can use this:

CDN for TimeLine plugin:

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TimelineLite.min.js


A small snippet for using it:

var toolTimeline = new TimelineMax();
toolTimeline.to("div",3, { top: '90px', });

$("#stop").click(function(){
    toolTimeline.stop();
})

Pressing the "stop" button stops / pauses it.

+1


source


You should use killTweensOf

for example:

$("#stop").click(function(){
    TweenMax.killTweensOf('div');
}
0


source






More articles:


All Articles