Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mango-nyc

Problem understanding and using kill()

Recommended Posts

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

Link to post
Share on other sites

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.

:)

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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)

  • Like 2
Link to post
Share on other sites

Thanks Diaco,

 

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

Link to post
Share on other sites

Great Answer Diaco explaining the various methods B)

 

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

  • Like 3
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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.

Link to post
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.

×