CODEWITHSUNDEEP
jquerygsap
Dileep
Dileep

Reputation: 515

How to stop Tweenmax animation while animating

I have tried to stop animation before complete the animation in TweenMax. Initially div top is '0px'. I am animating it to top '90px' in 3 seconds. If I click on button I want stop it. How to get it?

    TweenMax.to("div", 3, {
        top: '90px',
    }); 
    <div id="stop">stop</div>

Upvotes: 5

Views: 14431

Answers (3)

Max S.
Max S.

Reputation: 1461

You should use killTweensOf, such as:

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

Source: https://greensock.com/docs/TweenMax/static.killTweensOf

Upvotes: 2

karan3112
karan3112

Reputation: 1867

You can use kill() to remove the tween.

JS: To remove a tween.

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

Source

Upvotes: 4

Harshal Carpenter
Harshal Carpenter

Reputation: 506

For that you will need to use the TimeLine from GSAP.

A simple example on how you can use that:

CDN for the TimeLine plugin:

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

Small snippet to use it:

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

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

Clicking on the button with id "stop" will stop/pause it.

Upvotes: 0

Related Questions