Jump to content
Search Community

[SOLVED] Seek in dynamically added nested timelines

saulgoodman test
Moderator Tag

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

Hi all,

 

So I have a main timeline, in which  there will be delayed callbacks to functions that dynamically create and add timelines to the main timeline.

 

Everything works as intended if played normally. However, when I jump through the timeline using either seek() or progress(), things are not behaving as i would like them to.

 

I created a simple codepen demo to demonstrate my issue: 

See the Pen Lqftu by cocotard (@cocotard) on CodePen

 

You will need to open up the browser's console to see the log. Now, if played normally, following output is obtained:

 

main timeline started index.html:37
added Child 1 index.html:67
timeline 1 started index.html:52
callback 1 from child1 index.html:45
callback 2 from child1 index.html:45
added Child 2 index.html:77
timeline 2 started index.html:55
callback 1 from child2 index.html:45
callback 2 from child2 index.html:45
main timeline completed

 

However, if I seek to 4s, following output shows:

 

main timeline started index.html:37
added Child 1 index.html:67
added Child 2 index.html:77
main duration: 5 index.html:84
main progress: 0.8 index.html:85
c1 progress: 0 index.html:86
c2 progress: 0

 

What i expected (and would like to have), instead, is something like this:

main timeline started index.html:37
added Child 1
timeline 1 started
callback 2 from child1
added Child 2
main duration: 5 index.html:84
main progress: 0.8 index.html:85
c1 progress: 1 index.html:86
c2 progress: 0.5

 

Notice how child timeline c1 should have been completed and c2 is halfway to completion.

 

I have read other posts about one of the solutions was to make the function return a timeline instead of adding it to the main timeline. However this would not be possible in my case. In my real code, i am obliged to use .addCallBack() on my main timeline because there will be parameters needed to be passed - and the values of those parameters will have to be JIT. 

 

 

I hope I made myself clear. Please do not hesitate to ask for clarifications.

 

Thank you for your help in advance!

 

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

The issue is that methods like seek(), time() and progress can set the timeline's virtual playhead position to the indicated value (when progress and time are used as setters), but they don't change the instance's current state. In your sample your timeline is paused, so when you apply the seek() method the playhead moves forward to the indicated time, but the timeline is still paused, so the nested ones don't advance.

 

What you could do is device some code to move the nested instance's playhead to the corresponding position, according to their relative position in the master timeline. You can use a simple math calculation in order to see where  in each nested timeline, the master timeline's 4 seconds position lands and seek the child instances to that particular position as well.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

I've made a few small modifications that might suit you -

See the Pen Ecgmu?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

 

The changes are:

 

- adding main.removeCallback() inside addChild1 and addChild2 (so they are only called once and won't have duplicates added to main)

- initiating main before seeking:

main.progress(1).progress(0, true); // calls all callbacks so they are initiated
console.clear();
main.seek(4, false);
  • Like 4
Link to comment
Share on other sites

A big thanks to both rhernando and jamiejefferson!

 

rhernando, i was thinking along the same lines, however i was hoping to use the internal mechanisms of the timeline to deal with this, and jamie's solution's working quite well for me so far. 

 

Thank you again!

 

i'll mark this post as solved now.

  • Like 3
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.
×
×
  • Create New...