Jump to content
Search Community

kill animation, am not understand.

jonForum test
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, {
        delay:0.2,
        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, {
        delay:0.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 ....
pwsNvkvu_o.gif

thank for help

 

Link to comment
Share on other sites

Hi,

 

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

t.kill();

 

Or you can use kill tweens of:

 

https://greensock.com/docs/TweenLite/static.killTweensOf()

 

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

 

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

TweenLite.killTweensOf("#box");

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

yep tru, i found 

TweenLite.killTweensOf([this.scale,this.sprites.c2.scale],true);

 

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

hum...

 

 

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.
×
×
  • Create New...