TweenMax kill is not a function

[kanapkadev]

Hello !

 

Dear guys, I have a problem. My program works llike: I have one animation and when I click on e.g. 'Button1' my animation will change, and second animation will start (in infinite loop like the first).

 

I created an object with coordinates of my polygon points. I start with points[0]. When I click on button1 named 'Warsaw' my function gets current position of each verticles and paste it into new object with coordinates because I want a smooth transition between my animations.

 

So I think:  Aha!  I kill my old animation, create short new animation (with transition from current coordinates to first coordinates of my second animation), kill short animation and finally create my second animation which will be infinity looped (but until click on the second button).

 

But!  When I want to kill my first animation, javascript console says "TweenMax.kill is not a function". 

 

I don't know how repair that.

 

Please help

 

And sorry for my english

See the Pen EgpWam by kanapka94 (@kanapka94) on CodePen

[Carl]

Thanks for the demo. Cool effect!

 

However, in the future it would really help to have a reduced test case. We don't need to see nearly 200 lines of code if the issue is just about killing an animation.

 

If you create an animation like

var myAnimation = TweenMax.to(obj, 1, {x:100});

The proper way to kill it is:

myAnimation.kill();

not:

TweenMax.kill();

As the error states: TweenMax.kill() is not a method.

 

I can understand the confusion though. It's important to realize when looking at the docs that some methods of TweenMax are static methods and some are instance methods.

 

 

notice how .kill() doesn't have "TweenMax" before it?

That means that kill is a method of a TweenMax instance like in my example above where I used myAnimation. Instance methods can be called on any TweenMax tween that you create like:

myAnimation.play();
myAnimation.restart();

Methods like TweenMax.killAll() or TweenMax.killTweensOf() are static methods meaning they are called directly on the TweenMax class. They are things that TweenMax can do... not things that instances of TweenMax tweens can do. 

 

So, ini your example you would change

TweenMax.kill(shortTween);

to

shortTween.kill();

However, there is another problem with your code.

shortTween is not a TweenMax tween. It is an Array of tweens created by TweenMax.staggerTo();

 

 

 

So if you change your code shortTween.kill() you will get an error about shortTween.kill() is not a method either (because arrays don't have that method).

 

If you want to control or kill() a staggered animation you should place your staggered animations in a timeline and then control the timeline. so change your shortTween code to:

 

shortTween = new TimelineLite();



shortTween.staggerTo(copyPoints[polyNumber], 1, {
        cycle:{
          x:function(index){
            return copyPoints[polyNumber][index].endX;
          },
          y:function(index){
            return copyPoints[polyNumber][index].endY;
          }
        },
        onUpdate: function() {updateLine(polyNumber)},
        onComplete: onCompleteShortAnimation
      }, 0.2);

 

 

It seems you will need to do the same for activeTween.

 

Hopefully this helps a bit. Unfortunately your code is too much for me to try to fix it all. 

[kanapkadev]

Carl... I don't know what to say... But simply. Thank You man! Your help makes people happier

[Carl]

Glad it worked! Thanks for the nice note