.kill() timeline doesn't do anything.

[dghez]

Hi everyone.

I set a infinite timeline with some callbacks onComplete & onRepeat that change numbers around the page.

I'm working into an ember application, so because of my timeline is infinite and change numbers in the page I need to kill everything when the user leave the page to another, otherwise when he will come back the new timeline initialization will mess-up the design.

 

I tried with the function    mytimeline.kill() but looks like it doesn't work.

Any idea on how to solve?

Cheers!

 

ps: it's difficult to provide a codepen in this case sorry

[Jonathan]

Hello dghez, and Welcome to the GreenSock Forum!

 

This will be really hard to debug without seeing some of your GSAP code for context. Its hard to know when your killing your timeline. Maybe it is not in the right place when called. Or not killing the element instead of the timeline?

 

Also i use this, the HTML5 Visibility API when i want to pause my GSAP timelines when i leave browser tab and browser window. And then once i give that tab or window focus again i resume the animation.

 

Here is an example of that pausing and resuming a GSAP animation based on if the browser tab or window has focus or not.

 

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

Im sure if you provide some code we can better help you, since there could many things you could do, but its hard without some code for context. Even better if you provide a codepen since we love code we can test live.

 

 

Here is a list of available GSAP kill methods:

_________________________________________________________________

 

kill()

 

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

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/kill/

//kill the entire animation:
myAnimation.kill();

//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]);

_________________________________________________________________

 

killAll()

 

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

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killAll/

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

_________________________________________________________________

 

killChildTweensOf()

 

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

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killChildTweensOf/

<div id="d1">
   <div id="d2">
      <img src="photo.jpg" id="image" />
   </div>
</div>
<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") );

_________________________________________________________________

 

killTweensOf()

 

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

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killTweensOf/

TweenMax.killTweensOf(myObject);

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

_________________________________________________________________

 

You could use any of the above GSAP methods to kill the animation in part or entirely depending on the parameters and what method you use.