Jump to content
Search Community

killAll() firing before onclick

Spiderian 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

I am trying to build my own custom rotator, but I am having a problem with interrupting the current animation, then going to a specific one to play from there. I made a click function that plays from the desired spots, but I have tried several ways to interrupt the current animation.

disc01.onclick = TweenMax.killAll(); animate_rot01;
disc02.onclick = TweenMax.killAll(); animate_rot02;
disc03.onclick = TweenMax.killAll(); animate_rot03;
disc04.onclick = TweenMax.killAll(); animate_rot04;
disc05.onclick = TweenMax.killAll(); animate_rot05;

Here is the link to my codepen http://cdpn.io/IKvah

If I take out the killAll it plays through fine, but when I add it, it seems to fire before I click anything.


Any help would be awesome. After I figure out how to kill the animation I want to have the click ignore the delay.

Link to comment
Share on other sites



The issue is that when you reference a function directly on the event binding, it gets called as soon as the code is executed and not when the user clicks on the element.


With this code it should work as expected:

disc01.onclick = function(){TweenMax.killAll(); animate_rot01();};
disc02.onclick = function(){TweenMax.killAll(); animate_rot02();};
disc03.onclick = function(){TweenMax.killAll(); animate_rot03();};
disc04.onclick = function(){TweenMax.killAll(); animate_rot04();};
disc05.onclick = function(){TweenMax.killAll(); animate_rot05();};


  • Like 1
Link to comment
Share on other sites

Well the issue there is that the tweens inside the functions have a delay of 4 seconds, therefore there's a 4 second lapse when nothing happens.


An infinite image/content slider with mouse events is not an easy task to tackle, but perhaps this simpler approach by Chrysto might give you a... well simpler starting point:

See the Pen LckBh by bassta (@bassta) on CodePen


In this case you could kill the delayedCall so the function doesn't gets called and call the function manually to start all over again, from the slide indicated by the click event.



Link to comment
Share on other sites

I don't think I'm that far off. My new codepen works almost perfectly but it doesn't seem to matter what disk you click. It just goes in a linear order. http://cdpn.io/IKvah


I think there is something funny in the way the killAll handles stopping the current animation. For some reason the function don't appear to be attached to a disc, but instead they just go in order depending on how many times any of those buttons is clicked.

disc01.onclick = function(){TweenMax.killAll({onComplete:animate_rot01});};
disc02.onclick = function(){TweenMax.killAll({onComplete:animate_rot02});};
disc03.onclick = function(){TweenMax.killAll({onComplete:animate_rot03});};
disc04.onclick = function(){TweenMax.killAll({onComplete:animate_rot04});};
disc05.onclick = function(){TweenMax.killAll({onComplete:animate_rot05});};
Link to comment
Share on other sites

Hello Spiderian....


there are other ways to kill your tweens.. here is a list of available kill methods:





Kills the animation entirely or in part depending on the parameters.



//kill the entire animation:

//kill only the "x" and "y" properties of the animation (all targets):
myAnimation.kill({x:true, y:true});

//kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
myAnimation.kill(null, myObject);

//kill only the "x" and "y" properties of animations of the target "myObject":
myAnimation.kill({x:true, y:true}, myObject);

//kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
myAnimation.kill({opacity:true}, [myObject1, myObject2]);





Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.



//kill everything
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);





Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.



<div id="d1">
<div id="d2">
<img src="photo.jpg" id="image" />
<div id="d3"></div>

TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("image"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}});
//only kills the first 2 tweens because those targets are child elements of the "d1" DOM element.
TweenMax.killChildTweensOf( document.getElementById("d1") );





Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.




TweenMax.killTweensOf(myObject, {opacity:true, x:true});



you could use any of the above GSAP methods to kill all parts of the animation depending on the parameters and what method you use.



Link to comment
Share on other sites

Yeah, basically it's going one at a time regardless of which one you click on.


The reason to suggest Chrysto's approach is that I find your code far too complicated for something like this. It's easier to pass a slide number or id to a function, animate that slide and onComplete start a delayedCall for the next slide. On click you can kill the delayedCall and call manually on the function passing the slide corresponding to the disc being clicked.


Unfortunately I'm coming from a week off, so you got me with no free time at all, otherwise I'd jump into this right away.


Some time ago I created an image slider with random grid effects but no mouse interaction. The challenge was that there were different images collections that had to change when you clicked in a button. But as I said I started from the model that Chrysto created, I can't think of a better way to approach this stuff and some users have used his code to create their own.



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...