Jump to content


kill animation, am not understand.

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 guys how i can kill all current animation from target objet ?
Related to doc , am not sure am understand.

i get `TypeError: TweenLite.kill is not a function`


so here the example what am target.
Hold click will power Shake the hud.
But if release click befor i click shakes animations, i want kills.


So here my experiment
When downClick

  pointerDW(e) {
     TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) });
     this.sprites.c2.alpha = 0
     TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut });
      TweenLite.to(this.sprites.c2.scale, 1, {
        x: 1.4,
        y: 1.4,
        ease: RoughEase.ease.config({ template:  Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) 
      TweenLite.to(this.scale, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) });
      TweenLite.to(this.scale, 1.2, {
         x: 1.3,
         y: 1.3,
        ease: RoughEase.ease.config({ template:  Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) 
      this.slots.forEach(slot => {
        TweenLite.to(slot.position, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) });


and than, when release click i want kill all thoses. i use es6 decomposer
the Error come from 

TweenLite.kill(null, [this,this.sprites.c2,...this.slots]);
  pointerUP(e) {
    // kill all animations FIXME: ?
    TweenLite.kill(null, [this,this.sprites.c2,...this.slots]);
    // start new animations ...... from the cancel
    this.slots.forEach(slot => {
      TweenLite.to(slot.position, 1.2, { x: slot.position.zero.x, y: slot.position.zero.y, ease: Power4.easeInOut });



visual help ....

thank for help


Link to comment
Share on other sites


Arf ok it seem i need store all thoses in a variable ?

tween not have a native buffer for kill from the global TweenLite ?

Link to comment
Share on other sites



Indeed you need to store your GSAP instance somewhere in memory using a variable or constant declaration:


const t = TweenLite.to("#box", 1, {x: 100});



Or you can use kill tweens of:




In order to kill any tweens that target that particular element:


TweenLite.to("#box", 1, {x: 100});



Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

yep tru, i found 



Now i need found hacky wait to also kill delay:0.2, :)
Because if i click super fast, it not kill the delays animations 




edit: forget MEE it work if i remove true haha.

thank guys this is 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.