Jump to content
Search Community

TweenMax kill is not a function

kanapkadev test
Moderator Tag

Go to solution Solved by Carl,

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

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 :D

 

And sorry for my english :|

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

Link to comment
Share on other sites

  • Solution

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.

 

8250ff91e65e4b90885be519a3d82c01.png

 

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. 

  • Like 3
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...