Problem understanding and using kill()

[mango-nyc 0 Likes (Newbie)]

I'm trying to kill a tween after it plays- mainly because the <div> flies off the page- but it's still there, as you can scroll to the right and it is still there. I would like both divs to disappear after animating through the timeline.

 

I know there is a "clear()" as well, or maybe I should be using "clearProps"

 

 

Thanks

 

See the Pen yeKxyM by mangonyc (@mangonyc) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi mango-nyc ,

 

If I understand you correctly, you'd like to remove those elements completely after the animation? If so, you could do something like this:

tl = new TimelineMax({onComplete:theEnd});
tl.to ("#leftBlock", 1.25, {x:2200, transformOrigin:"50% bottom", ease:Power1.easeNone})
  .to ("#rightBlock", 1.75, {x:-2200, ease:Power1.easeNone},"-=.5");
  
function theEnd() {
 $("#leftBlock, #rightBlock").remove();
}

Here's some more reading about taking elements out of the DOM.

https://api.jquery.com/remove/

 

Hopefully this helps a bit.

[mango-nyc 0 Likes (Newbie)]

Thanks PointC,

 

That would work. I was actually looking for a solution within the Greensock API if that is possible.

 

Just curious how I would use kill( ); or clear( ); or clearProps( ); for something like this, or it might just be that they don't work the way I imagine.

 

Thanks

[Diaco 1,948 Likes (Superhero)]

Hi mango-nyc 

 

there isn't any method in GSAP api to manipulation the Dom structure .

 

and about methods you mentioned :

 

.kill( ) : Kills the animation ( Tween or Timeline ) entirely 

 

.clear() : Empties the timeline of all tweens, timelines, and callbacks

 

clearProps : A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties)

[mango-nyc 0 Likes (Newbie)]

Thanks Diaco,

 

That's very helpful to know, and thanks for the explanations of the other methods.

[Jonathan 5,176 Likes (Superhero)]

Great Answer Diaco explaining the various methods

 

mango-nyc .. Just to add to Diacos great advice! Here are some other available kill() methods. All can be found in the GSAP Docs page

 

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.

[PointC 8,599 Likes (Superhero)]

Jonathan - I had a feeling you'd be along with one of your awesome in-depth answers. Great stuff.

[mango-nyc 0 Likes (Newbie)]

Thanks Jonathan and everyone else, that's really helpful.

I've been playing around with these to better understand how they work in different situations.