Timeline Stop a tweenTo

[Chantal]

Hi,

 

I tried to reproduce my problem in the codepen.

 

I have multiple timeline and one timeline (a lever represents by the green square) have to go up and down when the user click on the state (Click 1, 2 and 3).

 

The problem is when the user click quickly the tweenTo seems to have to finish before doing the other tweenTo. How can I stop it now and do the other?

 

Thanks for your help!

Chantal

See the Pen mApBXQ by Chantal (@Chantal) on CodePen

[Jonathan]

Hello Chantal, and Welcome to the GreenSock forum!

 

Have you tried looking into the special property overwrite, you can add it to the vars of your tweenTo() as the 2nd argument?

.tweenTo( position:*, vars:Object ) 

Found in the TweenMax Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/

 

overwrite : String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property):

• "none" (0) (or false) - no overwriting will occur.
• "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties.
• "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers.
• "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time.
• "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet.
• "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.

Also I am a little confused by your example. You say How can you stop it now and do the other. The thing is inside your mouseup event handlers you are calling pause() on two timelines for each time mouseup is triggered.

 

But please standby while we look into this for you, thank you!

[Carl]

I'm having a hard time understanding your setup of having 4 different timelines with callbacks that control one other timeline.

Your demo was a a little broken because you had 2 mouseup functions for btn2.

 

From what I understand calling TweenMax.killTweensOf(tl3) may help.

 

 function tweenTL (sTarget) {
   TweenMax.killTweensOf(tl3);
   console.log("tweening to ", sTarget)
    tl3.tweenTo(sTarget);
  }

 

Please see: http://codepen.io/GreenSock/pen/EgooyB?editors=0011

 

Are you using 4 different timelines because your project is super complex or do you need help finding an easier way to navigate through the labels of tl3?

[Chantal]

Hi,

 

Thanks a lot for your help!

 

The Overwrite property seems to work!

 

Great!

Chantal