matthewwithanm

Thanks for the suggestion Gary. I know about Knockout but I'm actually already using React and I don't want to mix the two. Either way, I will be wrapping the timeline instead of using it as a model directly.

No, no. I appreciate the feedback—and the library!

Thanks for the response, Jack, but I understand the tradeoffs of events and callbacks, and how asynchronous functions work! I think maybe I wasn't clear in my previous post; when I said I had to give up on the idea of using the Timeline as a model for my components, I meant doing exactly what you describe: exposing a different interface to the things that are currently given timelines.

@Rodrigo Thanks for the suggestion, but I think that would have an undesirable performance impact. @Carl Yeah, I can see how all those events would be problematic. Really even a generic "onChange" would be great—something that covered any non-playhead change to the Timeline (like addition, removal, etc). Perhaps it could implemented in a subclass or extension? Using JS modules might help with such a thing. For the time being, though, I guess I'll have to give up on the idea of using a Timeline as a model. Thanks for the responses all.

Data binding is a process for keeping the data in two different objects the same. When the data in one object changes, the data in the other is updated to reflect it. It depends on being able to observe changes (e.g. via events). Changes in Timeline durations aren't observable, though. Note that when I say changes aren't observable I mean it in the conventional sense as in the observer pattern, Object.observe, etc. Obviously the new value can be retrieved with duration()—it's the change that can't be observed. I can't simply update my control whenever I add a tween because the tweens are added far away, in other objects, asynchronously.

Thanks Rodrigo. I know that the scrubber isn't being updated (hence the commented line). The custom slider is cool but my pen was just a simplified example. My real question is about binding something to the timeline duration. I'm beginning to think it's probably not as common as I thought and people just aren't doing it.

Hi Jonathan. Apologies for not being clear. I'm simply trying to create a control that's bound to a timeline instance. When you manipulate the control, it affects the timeline; when the timeline is played, it affects the control. Here is a much simplified pen demonstrating the kind of thing I'm doing. You'll notice that the <input> currently doesn't have the correct max, since it's not updated after the timeline's duration is changed. If you uncomment line 22, you can see how it's meant to work. My issue is that I can't just call my code's equivalent of updateScrubber() after something's added to the timeline because that happens far away from where the timeline is created and (like in the pen) asynchronously. The normal way this kind of binding would be accomplished is listening for duration changes on the timeline and calling updateScrubber() whenever they happen, however TimelineLite doesn't dispatch any events or have any callbacks for that. The second part of my question is about the safety of adding event callbacks in general. You can imagine that I might like to pass my timeline around and have other things bind themselves to it (like my scrubber is). However, because there can be only one callback for each event type, this can't be done safely (you might clobber a previous binding). I know I'm not the first to try to bind something to a timeline so I'm hoping for some tips about what people have done or some information about how the author intended for this to be done. Thanks!

I've created a "Scrubber" component that's meant to control a TimelineLite instance. The timeline is passed to other components so that they can add tweens, timelines, etc. However, these may not be added synchronously. The problem, then, is that I have no way of updating my Scrubber when the duration of the timeline changes. On a related note, timelines only one of each callback type (onUpdate, etc.). Given these two issues (duration not observable, no "safe" event listener adding), is it not possible to bind a control to a timeline? Or is there just some trick that I'm not seeing? Any info about what people are doing to accomplish this, or links to anything the author's said about binding like this is much appreciated! Thanks!