Jump to content


TimelineLite labeling

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

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. 

Link to comment
Share on other sites



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:

    .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




  • Like 2
Link to comment
Share on other sites

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

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.