Jump to content
Search Community

Problem understanding and using kill()

mango-nyc test
Moderator Tag

Go to solution Solved by mango-nyc,

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