Jump to content
GreenSock

borbulon

adding a child timeline previous to the current playhead time

Go to solution Solved by GreenSock,

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 again guys - I feel like I'm missing a simple property here, just wanted another set of eyes on it.

 

I have a timeline which controls the "playhead" of my "slide." For relatively complex reasons, child timelines get added by objects on that "slide" at the moment they are needed. 

 

However, if I seek my slide beyond the point that a child timeline gets added to the main timeline, that child timeline does not update.

 

to illustrate:

playhead |-----o------------x--------------|
             child      seek point

If I let the above play, through it's fine. I see the child timeline get added at `o` and doing its thing.

 

However, if I manually update the playhead (main timeline) to the seek point and at that point I say "go back and add the child timeline `o` at its spot", `o` gets added but does not get called until i seek previous to it and play through that spot.

 

I hope that's a clear enough explanation of the issue.

Link to comment
Share on other sites

Despite not fully understanding the multiple cases you are explaining, I tried to replicate the problem and could not.

 

http://codepen.io/GreenSock/pen/VvVMje

 

It would really help if you could create a demo. Thanks.

  • Like 2
Link to comment
Share on other sites

See the Pen PPxJmK by team (@team) on CodePen

 

have a look at this. a few things I've done to change it:

 

1. I changed it from time to a label.

2. I paused the main timeline before seeking it. (important - this case is about paused timelines, and I'm super sorry I didn't mention it earlier)

3. I added the pause-seek in a different timeout than the addition of the other child (it will happen about a second earlier)

4. I seeked beyond the entry point of the child timeline to be beyond the start of the child timeline.

Link to comment
Share on other sites

by the way you can get the same results by modifying your original pen just a little bit - pause the timeline and seek it, but do it before adding the child timelines:

 

See the Pen zvMMjZ by team (@team) on CodePen

Link to comment
Share on other sites

But I can't play at that point. I'm supposed to be paused.

Link to comment
Share on other sites

you seek and pause at 1.5 and add tween with 0.5 duration at 1 . so when you play , indeed the child tween is finished to opacity '0' .

 

pls check the codepen again : 

See the Pen jbQQdb by MAW (@MAW) on CodePen

Link to comment
Share on other sites

I understand what you're saying, but I can't play at that point. I just need the child timeline to be updated to where it *should* be, without playing the parent timeline. 

Link to comment
Share on other sites

hmm , if i understood correctly now , pls put the tl.pause().seek() after adding the child at the end of addChild() fn

 

pls check this out : 

See the Pen jbQQdb by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

I understand I can do that, but I don't think you're understanding me. The timeline is paused when I put the child into it, and there's nothing I can do about it. It's the crux of the problem. I can't change the parent timeline, I can only put a child into a paused timeline. It is what it is.

 

I just need a way to take any child timeline that is placed into the paused parent, and make sure the playhead of the child timeline is where it should be at that spot in the parent timeline.

Link to comment
Share on other sites

Thanks for all the input guys. It took me awhile to understand it, but I get it now ;)

 

Borbulon, the reason you are getting this behavior is based on an inherent performance optimization built into the engine. Basically an animation will not update unless the playhead changes position. So in basic terms you move the play head and pause, then you add an animation prior to the playhead, but since the playhead doesn't move it doesn't force an updated render cycle. 

 

I will post back with a suitable solution. Thanks for your patience. And Diaco, thx for all the help!

  • Like 3
Link to comment
Share on other sites

in addition , for now pls try add this after adding the child timeline : tl.seek(tl.time()+0.001)

 

See the Pen jbQQdb by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Thanks Diaco, but as you can see from my second pen, I already found that solution (comment at the bottom), but don't want to hack around the problem.

Link to comment
Share on other sites

  • Solution

Good conversation guys. Let me offer a few things that will hopefully help:

  1. We put a HUGE priority on performance since animation is probably the most performance-sensitive part of UX. As such, timelines don't spend the extra resources to render if the playhead position hasn't changed (in 99.99%+ of the cases, that'd be an utter waste). 
  2. Paused children don't render either (after all, they're paused and shouldn't be changing). Another performance optimization.

You can force a render pretty easily by moving the playhead and then putting it right back where it was:

var time = timeline.time();
timeline.seek(time-0.01).seek(time);

Or there's an undocumented render() method that has a "force" parameter that'll...um...force the render even if the playhead position hasn't changed:

timeline.render(timeline.time(), true, true);

I certainly could remove the conditional logic that skips unnecessary renders (or add more code to accommodate the edge case you presented), but I'm reluctant due to performance considerations. In other words, since it is already possible to get the behavior you want with 1 extra line of code (albeit not ideal), it's tough to justify making everyone pay a performance price across the board in order to accommodate a very rare edge case like this. See what I mean? It seems wiser to just have you add the extra line of code in this case. Feel free to offer other suggestions or chime in with a different opinion. 

  • Like 6
Link to comment
Share on other sites

Thanks Jack! Helpful as always. 

 

I don't think you should change any of how you have it to accommodate an edge case. I know when I'm building libs I most certainly don't.

 

But it's good to know this `render` method exists. I've seen `render` in the AS API docs and tried it in JS, but it wasn't working as I expected it to. `force` was the key.

 

Thanks!

  • Like 1
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.
×