Share Posted January 26, 2016 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 More sharing options...
Share Posted January 26, 2016 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 26, 2016 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 More sharing options...
Share Posted January 26, 2016 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) 2 Link to comment Share on other sites More sharing options...
Author Share Posted January 26, 2016 Thanks Diaco, That's very helpful to know, and thanks for the explanations of the other methods. Link to comment Share on other sites More sharing options...
Share Posted January 26, 2016 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. 3 Link to comment Share on other sites More sharing options...
Share Posted January 26, 2016 Jonathan - I had a feeling you'd be along with one of your awesome in-depth answers. Great stuff. 2 Link to comment Share on other sites More sharing options...
Author Share Posted January 27, 2016 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now