Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Isolate all tweens between two labels

Recommended Posts

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?  

Link to comment
Share on other sites

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.



  • Like 5
Link to comment
Share on other sites

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})


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



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.




  • Like 6
Link to comment
Share on other sites

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.

  • Like 2
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.