mr.x

Hey Jonathan, unfortunately it doesn't seem to help on my OSX Chrome 53, the animation is still jittery But thanks for trying at least! This community is so helpful.

Awesome, thank you so much Jack! And thanks for everything, GSAP is the best. So if I understand correctly, when you .add() a nested timeline it doesn't actually copy the tweens into the parent timeline, but rather just points to that timeline.

It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates. I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) .add(box3Timeline); to: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) // this won't animate when there's a duplicate below .add(box3Timeline) .add(box2Timeline); // comment this out and the earlier one will animate But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will. Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!

Ok, but what if we're using TweenNano? Nano doesn't seem to support getTweensOf();

Often in a timeline sequence I'd like to simply call a function. The best way I've figured out to do this is using a delayedCall like: myTimelineLite.append(TweenLite.delayedCall(0, myFunction)); but is there a better way? This code works, but seems a little clunky.