Dave Stewart

OK, I've been curious about this for ages, so here's my take on wrapping it up into a useful workflow: https://gist.github.com/davestewart/39f626de39b57e6a132b It adds a new method, $.loadImages, and allows you to add callbacks to both queue and image: $.loadImages(urls, onDone, onFail, onLoad, onError); Will have to look at PreloadJS too...

I love it Chrysto! I've been looking for a Promised-based asset loading example in the last few weeks, and that makes it really clear! Is there some easier way to handle arrays of images? There was code at HTML5 Rocks that demos using Array.reduce to iterate over an array: http://www.html5rocks.com/en/tutorials/es6/promises/#toc-creating-sequences You got anything similar?

And here's an example with nested timelines: http://codepen.io/davestewart/pen/Gjoap?editors=101 The next feature will probably be to add an extra playhead to indicate the progress of the active timeline.

So I've been slowly improving my basic Timeline controller with an aim to get something pretty useful. Currently, it has the following features: A scrubable timeline Buttons to play, pause and restart Buttons to skip through start, end, and labels (TimelineMax only) Clickable label markers (TimelineMax only) However, the final aim was make it modular and sharable, and I've come up with a solution that allows you to add it to any Greensock Pen in 2 lines of code: It uses the HTML import feature of Code Pen to import HTML, CSS and JavaScript in one line of HTML: [[[ You then connect your Timeline to the controller using one line of JavaScript: Controller.init(tl); You can optionally append the controller to any element in your page, by passing the container selector as a second argument: Controller.init(tl, '#animation'); You can check out the example Pen here: http://codepen.io/davestewart/pen/EJyge?editors=101 Note the lack of any Controller markup or logic! The source Controller Pen is here: http://codepen.io/davestewart/pen/itCkj?editors=100 Feel free to import the controller into your own Pens, and I''ll continue to add features as I think of them. Enjoy! Dave

FWIW I made you a new logo should you ever decide to bloat the platform out with a ton of features nobody needs: Confused? It's TweenPhat, of course

Hey guys, Thanks for putting together some well-thought out responses. And Rodrigo, for digging through the forum posts to get me up to speed on prior conversations. Totally agree (again) about the balance between speed and power, especially when probably the majority of users are just creating fairly simple timelines. Though it feels like these events would complete the play-state "family" of events. However, in light of your very reasoned responses, it would be silly for me to say much more to support my case, or else I'll turn into one of those "but my need is different" types! The only thing I'd say from my cursory look at the source, is that any impact on KB looks like it would be negligible (being that the event calling would be confined to a couple of places only) and performance would be a non-issue seeing as at one point of either event, the timeline would be stopped anyway! Anyway, after building about 10 Pens and testing a whole bunch of stuff out, from nested timelines, to events, pauses, callbacks, etc., etc., I'm about to build my 11-scene monster animation now, with pauses and all that jazz, so no-doubt I'll have a different perspective once done. I'm all tooled up with the various workarounds needed, so perhaps I'll comment back when done. Thanks again for the input, and the kind words, Jack. TTFN, Dave

Well, decoupling is a perfectly reasonable requirement. Take my Nested timeline and pause v2 example. The whole point of that test was to work out how to show a global overlay when the timeline pauses. Using an interim addPause() method seems like the best bet to decouple behaviour from animation, and should be agnostic as to what timeline its pausing. It should just tell a timeline to pause, and it should pause. At the same time, the method should not be tasked with any additional functionality, as I may not want to (or it may not be convenient to) introduce code at this point to control other elements within the page, say for example: a "playing" indicator a "your game is paused" overlay an options menu Each one would have its own encapsulated logic, for view elements, interaction, etc. So let's say we have all 3 of these, and each needs to respond to the state the timeline is in. By having to add code to inform each of these elements within the addPause() function, we make the timeline code tightly-coupled and fragile. An alternative might be to create a PlayStateEventManager instance, which the addPause() method could inform when the timeline pauses, and that could in turn have event listeners added or removed from it, but then we're adding a new object and additional wiring, that doesn't need to be there. Simply being able to add listeners to a timeline to respond to change in play state not initiated by a user action would solve this. Make sense?

Would also be cool to have onLabel events, which could be really useful to trigger external functions as the playhead hits timeline markers.. I guess the workaround for the time being is to add a callback at the same time: function addMarker(tl, label, time, callback, params, scope) { ​ tl.addLabel(label, time).call(callback, params, scope, time); }

Should be easy to code around this, but any reason timelines don't dispatch onPause and onResume events? Seems like they would complement onStart, onUpdate, and onComplete well.

I've updated the Pen with some extra code to give each pause an automatic label, and some prev / next buttons to enable manual navigation through the timeline: http://codepen.io/davestewart/pen/wlFDf

Hi Carl, Regarding the integrity issue - I think upon further examination that this is Chrome-specific, something to do with rendering, and perhaps some kind of visual caching. Take this animation: http://codepen.io/davestewart/pen/wlFDf On Chrome, if you scrub the timeline by moving your mouse over the bottom grey bar, you see the red box travel across the screen. If you get the velocity just right, the red box appears to get significantly narrower (even down to about 20px) until after 4 or 5 scrubs it begins to start maintaining its shape again. However, I've just tested in the other browsers and I can't get it to happen. And in some animations in Chrome it doesn't happen either. It seems to be a intermittent. And when I take a screenshot, the box is rendered at the correct size (I guess there's some internal routine that must finish on that cycle). It's certainly not my eyes, there's something going on which Chrome - though not GSAP, as I can tell now! Do you not get the same results? Cheers for the explanation too. Very interesting.

Hi Rodrigo, Yeah, aAs you can see from the animation, sometimes the union of the blocks is perfect, sometimes it's off by a couple of pixels. For something like an dialog box showing it might be alright, but there maybe times when its alpha is 0.01 off or something. What would be great would be some kind of programatic way to addPause(), but of course it can't be implemented in show() as show() doesn't know when it will be added! However, after a bit of thinking, I came up with this example, which uses an interim function to achieve exact accuracy: http://codepen.io/davestewart/pen/wlFDf It's possibly even better, as although it doesn't feel as expressive, it's explicit.

I'm curious as to the mechanics of how timelines and also nested timelines work. I suspect that the individual animated properties from each element end up with their own individual animation track, is that right? I'm guessing that code used to create the key frames and values is first first set, then these tracks are controlled (or the values therin are retrieved on a global level) according to the global progress value? Do these tracks remain nested, or are they all passed up to some kind of top-level array? Also, when scrubbing some of my animations quickly, you can see that the results seem to get more accurate the more of the timeline that has been scrubbed. In the example of a simple box animating left to right on the stage, the integrity of such properties as width and height appear compromised, until those frames have been fully gone-over: http://codepen.io/davestewart/pen/ACHmx Is there some kind of rendering / caching going on here, so that the original code which creates the movement eventually becomes redundant? Anyway, just very interested / curious. I think it would be really useful to know a bit about, and have an appreciation of, what is going on under the hood in order to get the most out of the library. Am really getting into Timelines now. They're pretty amazing. Cheers, Dave

I'm beginning to get the hang of animating elements in separate timelines, then adding these to a top-level timeline to played through as part of an overall sequence. In my current project I have a number of child scenes to animate and play through as part of the overall timeline. However, each of these child scenes has to pause in the middle, then instruct a global info panel to update and show itself as it does. Panel : A B C Scene : 1 -----^-----> 2 -----^-----> 3 -----^-----> Currently, in order not to have to re-type out the animation for this, I'm creating the code to do this showing-and-hiding using a generator function, which returns a new TimelineLite instance, which is added to the main timeline, one by one. So that gives me the animation, now for the pauses. There's 2 ways I can think to do this: Add pauses to the main timeline manually Call the main timeline's pause() function from a callback or eventHandler within the child timelines Currently, I'm using option 2, which seems to work well. Here's a demo which shows the approach: http://codepen.io/davestewart/pen/HmJsn?editors=101 Is this the best way? Or is there some way events can bubble up from child timelines to the parent? Cheers, Dave

Thanks for taking the time to reply, Jack! (though I think you may have wanted to reply to the other thread). Those are certainly all workable suggestions, if a little more verbose than a global default - but as you discussed above, everything has a reason. Hope you had a good holiday, Dave

That's great Jack. Thanks!

Thanks for the link. Wow... that is completely counter intuitive! Such a shame, as animating the background image like that is simply the most logical choice for pretty much any background-looping animation. I wonder if this might be a good option for a plugin? I'd asked in a previous thread whether the plugin architecture was documented. I haven't seen any, but I'm sure I could pick-apart an existing one and go from there. Anyway, thanks very much again for the info. Very useful.

Not sure if I follow you there Rodrigo. yourFunction is passed by reference to the tween instance's vars object, and is called via Function.apply when the tween completes: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenLite.js#L1362 this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray); Whether the parameters passed to the callback function reference are a predefined array or a predefined event object wouldn't make any difference to performance or filesize. But I've no problem with that. The fact that GreenSock makes everything else so damn easy is good enough for me! Thanks for the input though

OK, thought so, thanks.

Hi Jonathan, Thanks for that. That's certainly helpful, but boy, it feels a little dirty! I'd rather some intuitive default values as suggested above, or an event object of mixed-in parameters rather than having to pass in a set of onEventParams values each time I create a timeline. I guess it's too late in the product cycle to suggest a nicer alternative now, so I'll have to live with it. What would "param2" be, the string "param2" or the .param2 property on the original timeline, or its .vars object?

It's a shame event handlers aren't passed any arguments: http://codepen.io/anon/pen/IsqiC Surely this is an opportunity to pass some handy default values, especially when scoping the handler to something other than the timeline you're animating? An event object would be handy, or even just a few basic arguments, such as: onUpdate:function(tween/timeline, progress, totalTime){ ... } Was there a particular reason to omit this? I feel a fork coming on... Cheers, Dave

Tweening background-position with percentages doesn't seem to work. http://codepen.io/anon/pen/dxhrm Should this be so?

Oh yes! Happy You Kicked Our Asses 300 Years Ago Day Enjoy.

OK, have forked, updated, and submitted a pull request: https://github.com/greensock/GreenSock-JS/pull/56 Be sure to check the "defaultScope" branch. Appears to be working happily on: onStart onUpdate onRepeat onComplete onReverseComplete addPause() call() Did I miss anything? Cheers, Dave

Took a look at the GitHub source and it looks like this could be implemented really easily, for example: this._onUpdate.apply(this.vars.onUpdateScope || this.vars.onDefaultScope || this, this.vars.onUpdateParams || _blankArray);