TimelineLite labeling

[isaballoon]

Question about labeling. I have three items I'm animating in initially with offsets of item02 & item03 relative to item01 (first three lines). Works fine.

 

Issue arises when it's time to animate out. How do I go about labeling line 5 given it's the same item (item01) as in line 2? I attempted creating a unique label name for line 5 to no avail. How are labels handled when you have multiple tweens with the same object in the same TimelineLite sequence?

 

Stated another way, is it possible to use labels when a sequence contains mutiple references to the same object?

 

var tl = new TimelineLite();

tl.from("item01", 0.5, {left: "+=40px", autoAlpha:0}, "item01")

.from("item02", 0.5, {left: "+=40px", autoAlpha:0}, "item01+=.1")

.from("item03", 0.5, {left: "+=40px", autoAlpha:0}, "item01+=.1")

.to("item01", 0.5, {left: "-=50px", autoAlpha:0}, "item01+=2.6")

.to("item02", 0.5, {left: "-=50px", autoAlpha:0})

.to("item03", 0.5, {left: "-=50px", autoAlpha:0})

.from("item04", 0.5, {left: "+=20px", autoAlpha:0});

 

Thanks, guys. 

[Rodrigo]

Hi,

 

Labels work in the same way they do in the Flash IDE. They are marks of specific points in the timeline which helps the user go to that label, pause, reverse, resume, add callbacks and the whole enchilada GSAP has to offer in terms of playback and callbacks.

 

A timeline can have as many labels as you want and they are very useful for example for what you're trying to do. If you later change the durations of your tweens, it won't matter the separation between them will be given by the specific label position and nothing else. So for the return you can add a new label, with a different name of course, and add the tweens of the return animation relative to that particular label. For that the add() method is a great way, because you can add the label at a specific time and then add the tweens relative to that label, like this:

tl
    .add("returnLabel", "+=1.9")
    .to(item01, 0.5, {left: "-=50px", autoAlpha:0}, "returnLabel")
    .to(item02, 0.5, {left: "-=50px", autoAlpha:0}, "returnLabel+=.1")
    .to(item03, 0.5, {left: "-=50px", autoAlpha:0}, "returnLabel+=.1")
    .from(item04, 0.5, {left: "+=20px", autoAlpha:0}, "returnLabel+=.1";

I've set up a codepen with a working sample. If is not what you need please fork it and accommodate it to your scenario:

See the Pen gKJvE by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.

[isaballoon]

Brilliant! Just what I was looking for, Rodrigo. Thanks so much.