Jump to content
Search Community

Binding n different objects to TimelineLite and how do you cancel the previous animation that is under execution?

Abhilash L R test
Moderator Tag

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

Suppose I have 2 ul with li elements, based on a single button click, I will enable the animation on the ul's based alternatively. Suppose the animation on the li's have sequenced order and take, say 5 seconds, to complete, and before the animation has even stopped, If I click on the button again, the animation on the previous does not stop while the animation on the second already starts.

 

So question is now simple, how do you stop the animation of an object if a new animation is propagated on the same timelinelite object but with different DOM objects?

 

Basically saying, stop in jquery.

Link to comment
Share on other sites

Hello and Welcome to the Greensock forums

 

you could use any of the kill methods depending on your situation:

 

_________________________________________________________________

 

kill()

 

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

 

http://api.greensock.com/js/com/greensock/core/Animation.html#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://api.greensock.com/js/com/greensock/TweenMax.html#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://api.greensock.com/js/com/greensock/TweenMax.html#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://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf()

TweenMax.killTweensOf(myObject); 

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

_________________________________________________________________

 

depending on what your trying to stop or in this case kill.. you could use any of the above GSAP methods to stop the animation

 

also if you provide a codepen / jsfiddle example we can help you more specifically.. :)

  • Like 3
Link to comment
Share on other sites

Jonathan's post covered the different methods of killing tweens pretty well, so if you are still having troubles, it would help if you could post a live example at codepen.io or jsfiddle.net showing the problem so we can clearly see where the issue lies and provide a quick solution.
 
With staggerFromTo, you've just used an incorrect syntax there - only from and to vars should be wrapped in an object. It should be:

TweenMax.staggerFromTo(o,1,{opacity:1},{opacity:0},0.5,fun);

From the docs:

staggerFromTo(
  targets:Array,
  duration:Number,
  fromVars:Object,
  toVars:Object,
  stagger:Number = 0,
  onCompleteAll:Function = null,
  onCompleteAllParams:Array = null,
  onCompleteAllScope:* = null
)
  • Like 1
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...