Isolate all tweens between two labels

[Juno911]

What would be the best approach to play all tweens of a timeline but not those between two labels. So the two labels mark a start and end position and all tweens in between should be skipped or soft-removed. I am looking for a parameter to play the timeline first fully, then again but skipping a specific passage, and at last again fully. 

Think of a timeline containing a start label, a tween and a end label. Loop this trio several times. Now you have a lot of tweens, all with a label before and after it. Lets say the timeline has 10 tweens (means 20 labels which are 10 start and 10 end). Now I dont want to play Tween 6, but all others. 

I could learn all labels from timeline array, then all tweens from timeline and manipulate data unitl I have just those tweens I prefer. But this is the last way I would go.

More elegant appears the tweenFromTo in a loop. Each time it loops it play all tweens between a start and end label. But this is not timeline based anymore, just tweening. 

So, where is this timeline.tweenNotFromTo("start_1", "end_1").tweenNotFromTo.("start_3", "end_3") super function?

What is your recommendation?  
 

[PointC]

If I understand your question correctly, I'd probably use the tweenFromTo() method. You could add those to a master and play() it. Maybe something like this:

 

master.add(tl.tweenFromTo(0, "skipStart"));
master.add(tl.tweenFromTo("skipEnd", tl.duration()));

 

I have no idea what you're animating, but that could result in harsh jump of your elements.

 

Happy tweening.

 

[Carl]

Yeah, its really hard to know exactly what you mean without seeing some sort of reduced test case.

 

PointC is exactly right, you can add your tweenFromTo()s to a timeline and that might do the trick for you.

 

Its important to note though that if you skip over a tween in a timeline it is still going to render in its end state.

You sort of eluded to the fact that you understood this when you suggested "soft-removed"

 

In other words if you have a timeline that tweens 3 colored elements like

 

tl.to(red, 1, {x:100})

.to(blue, 1, {x:100})

.add("greenStart");

.to(green, 1, {x:100})

.add("greenEnd");

 

if you  do a tween like

 

tl.tweenFromTo("greenStart", "greenEnd")

 

you are still going to see red and blue at an x of 100 because when the playhead jumps to "greenStart" those first 2 tweens will need to render in their end state.

 

--

 

Without knowing more about your project I wouldn't put all my tweens in 1 timeline if I had to skip parts of it, I would create 3 different timelines and then build another timeline built of tweenFromTo()s of those timelines

 

so imagine you had

var blue = new TimelineMax()

var red = new TimelineMax()

var green = new TimelineMax()

 

and each of those timelines had a label of "start" and "end" at the start and end respectively.

 

I would then build a timeline like

 

var master = new TimelineLite



//play through blue, red, and green in direct succession

master.add(blue.tweenFromTo("start", "end");

master.add(red.tweenFromTo("start", "end");

master.add(green.tweenFromTo("start", "end");



//play blue and then green BUT skip red

master.add(blue.tweenFromTo("start", "end");

master.add(green.tweenFromTo("start", "end");

 

Hopefully that helps. Again its likely we might be misunderstanding something, so feel free to post a simple demo if you need more help.

 

 

 

[Juno911]

Thanks a lot guys. Having TweenFromTo as a master part was not clear to me that works. This is totally the solution I was looking for. Thank you so much.