Jump to content


exportRoot reset issues

Recommended Posts



I am having difficulty with the greensock exportRoot() method.

I have attached a basic codepen, and i'll explain the trouble here:


I have a slider using jquery UI to scrub through my animation for debugging purposes.

I want to be able to insert this slider into any animation i'm creating, so on the slider functions i use the timeline.exportRoot() to pick up any greensock timelines that might occur in the script; - I don't want to have to pick through the scripts to find out what the timeline variables are named each time, I want this to be an adaptable, flexible tool.


I want to run an animation repeatedly, and i want the slider to go back to the beginning and restart animating on each loop accordingly, inline with the animation.

As you will see in the codepen, this is not what happens.

I have logged the time() for the animation timeline and the exportRoot version, and you will see that the exportRoot timeline does not go back and restart along with the animation timeline.


Is there a simple way to achieve this?


thank you very much.


Jonny :)


See the Pen RWXzaq?editors=001 by JonnyS (@JonnyS) on CodePen

Link to comment
Share on other sites

It works. You are changing the start time with your callback. What happens inside a function is not part of the timeline. If it was, then how would you be able to scrub the timeline? It would be adding what you scrubbed... and I don't even know what type of madness that would result in. 

Link to comment
Share on other sites



I see what you're saying about the scope of actions within a function, but are you saying that the exportRoot() timeline will keep ticking over regardless of what happens within a timeline, - so the exportRoot version will only stop counting when my original tl stops and doesn't restart etc?


I'm not sure how i can go back and reset the exportRoot() timeline to be 0 when the original one does?



Link to comment
Share on other sites

Blake was right that things you do inside functions / callbacks really can't be controlled by a timeline that was already created via exportRoot(). In simple terms exportRoot() only grabs active tweens that were present when exportRoot() was called. Frankly, some of what is happening in these demos is a bit of a mystery to me and I've sent a note upstairs to get some more official answers. Stay tuned. 

  • Like 1
Link to comment
Share on other sites

Actually, Blake hit on the most important aspect of this. 


everytl is technically the parent timeline of tl. Every timeline has a parent and the position of the child relative to the playhead of the parent dictates what gets displayed. 


When you tell tl.play(0) that actually moves the position of tl inside of everytl. As Blake said, it changes the startTime() of tl bringing it forward in time to where the playhead is positioned in the parent everytl.


when you first call exportRoot() tl has a startTime of 0 inside everytl.

once tl plays through  the playhead of everytl is at time(6)

when you call tl.play(0) it sets tl.time(6) and then everytl plays from time(6) to time(12).


Hopefully this makes some sense.

Blake, thanks for the help!



By moving tl forward, you are thus changing the duration() of everytl. 

  • Like 4
Link to comment
Share on other sites



This is visible through the behaviour of the slider, the first time it starts at the beginning (0/6seconds), then the second time half way through (6/12) and the third time two thirds of the way through (12/18seconds).


Now i just got to figure out how to get everytl to revert back to the beginning on loop

Link to comment
Share on other sites

J, please see my previous answer, which hopefully removes the mystery.

Link to comment
Share on other sites

The mystery to this is similar to understanding time travel paradoxes, and can hurt your brain.


Basically there is no easy way create a master timeline for playback that records everything. Some of the biggest issues to deal with include memory usage, callbacks, and dynamically creating animations. There's ways to deal each one of those issues, but there's no easy button for all of them.


Here's your demo again with 3 timelines/sliders. It only starts off with 1 slider, but the other ones will show up later. Play around with the sliders, particularly the 2nd and 3rd one. It should be much easier to realize what is happening.


See the Pen 6fa4f91c476fcf396b6d17661def892d?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Hello all, 


Sorry for the slow reply, i haven't had the chance.

Yes i understand what is happening here, and thank for the demo Blake.

the everytl playhead wouldn't restart at the beginning position on loop because of the time that has already gone before in the tl timeline.


Bit of a pain really but not sure how to over come this,  without moving away from using exportRoot, - it works perfectly well on the first loop, which is the most help.


thank you for your help.



Jonny :)

Link to comment
Share on other sites



I have been thinking about this issue for a while now.

I want this tool to be adaptable and flexible for applying to different projects.


This means that a few requirements are needed in order to achieve this with minimal tweaking:

1. There should not be a need to manually search for greensock timeline names (hence the use of exportRoot())

2. I have decided that I have approached this incorrectly, and that the slider should start at the beginning, and not loop with the animation timeline, but carry on and only reach the end when the animation timeline has stopped, after however many loops is required.


This would involve pre determining how long an animation timeline is, and multiiplying that by however many loop i had.

Is there a way to find the length before a timeline has been played?


This way i could dertimine the length of the whole animation, not just the length of one loop, which is essentially what is happening now.



Link to comment
Share on other sites

Hi Blake, 


Thanks very much for these links.

Although my aim has changed from my original plan (the slider now starts at the beginning and ends after all the loops, with no restarting with animation timeline - think this is more useful for debugging purposes) - I have resolved it!! I am very happy about this.


I created my animation timeline, and added a repeat method, the tl.exportRoot() method takes these repetitions into account as part of the totalDuration.


If you are interested, here is a simplified codepen of what i've done:


See the Pen mVdwWj by JonnyS (@JonnyS) on CodePen

  • Like 1
Link to comment
Share on other sites

Nice. That's probably the easiest way to do it. Keeping track of stuff that changes due to a callback can real tricky, and would require a lot of extra work.

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.