Jump to content


Nested relative tween time position

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



Is there currently a way to get the time an tween/timeline starts relative to a timeline the tween/timeline is nested inside of? For example:


Consider a tween nested within timelines as represented by the following xml:


<timeline id="a" start="3">

<timeline id="a1" start="4">

<tween id="a1a" start = "2" duration="4"/>




It would be useful to know the time with regards to "a" that "a1a" starts (or ends).





Link to comment
Share on other sites

Hi, I don't know right now of a direct way, but each tween/timeline has a timeline property (which refers to its parent timeline) so it is possible to traverse up your hierarchy and find all the start times of your various elements.


Fortunately you aren't nested too deep. Consider this:



var mainTl = new TimelineLite();
var nestedTL = new TimelineLite();

var obj = {value:0};

var nestedTween = TweenLite.to(obj, 1, {value:10});

//add tween 2 seconds into nested
nestedTL.insert(nestedTween, 2);

//add nestedTl 4 seconds into mainTl
mainTl.insert(nestedTL, 4);

console.log(nestedTween.startTime()); //startTime of nestedTween inside of nestedTl //2 
console.log(nestedTween.timeline.startTime()); //startTime of nestedTL inside of mainTl //4
console.log("start time of nestedTween relative to mainTl = " + (nestedTween.startTime() + nestedTween.timeline.startTime()))// 6


fiddle: http://jsfiddle.net/geekambassador/AcnyA/


does this help?

Link to comment
Share on other sites

Yep, you can find that out. Every animation (tween or timeline) has a "startTime()" that's relative to its parent timeline's startTime(). You can get its parent timeline using the "timeline" property. Just keep in mind that you may need to factor in timeScale() values if they're not 1. Kinda like:


//figures out where a1a starts in terms of its parent timeline's parent timeline
var a1aStartsAt = a1a.timeline.startTime() + ( a1a.startTime() / a1a.timeline.timeScale() );


Does that clear things up?


If you want to wrap this into a convenient function, I think this would do it:


function getRelativeStartTime(animation, ancestorTimeline) {
   var curAnimation = animation,
       time = animation.startTime(),
       timeScale = 1;
   while (curAnimation.timeline && curAnimation.timeline !== ancestorTimeline) {
       curAnimation = curAnimation.timeline;
       time += curAnimation.startTime();
       timeScale *= curAnimation.timeScale();
   return time / timeScale;

Link to comment
Share on other sites

Thanks guys for your prompt feedback!


This code that Jack posted should fit the bill.

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.