Dave Stewart

Hey Carl, The undesirable effects were just the main timeline looking severely out of sync as it played through. And what I meant by before/after with the insertion was more that the physical act of adding a pause lengthens the timeline to that point. I get that you can add in either order if you are specific about it though. Thanks for the clarifications anyway

FYI, this is the animation: http://g4s.davestewart.co.uk/ The animation-specific files are: story.js - manages the main timeline, locations, scenes, and dependancy-injection scene.js - a wrapper around child timelines and their elements main.js - where all locations, scenes and animation are configured functions.js - helper and prototype functions It's pretty much the same approach used on the GSAP homepage, but with more structure.

I should add the new Controller code at some point - it's more robust now! OK, I see what you're doing there. The trick seems to be adding the pause to the main timeline only *after* you've added the child timeline, as otherwise, from memory, the pause would have already changed the main timeline's duration, and the child would be added at the end, right? That's a good enough workaround for now, I'll run with that. In fact, my main Story object which manages all the child timelines could easily be responsible for adding pauses to the main story timeline. Just after initialization, it could loop over all the added child timelines, look for 'pause' labels, then add pauses to the main timeline. I guess I could wrap all this in a prototype method that would allow callbacks to be stored on the vars object as well, so in the final sweep, they would already referenced for calling at the correct time. It is all getting a bit spaghetti-like though. Would love to see some kind of OO .addRootPause(). To be honest, I've added references in my childTimeline vars objects to their parents anyway. Is this impossible / disadvantageous in the API? Also, are there situations where it's actually *appropriate* to pause child timelines? I've done by accident a couple of times, and it seems to produce pretty undesirable effects. That's not to say there won't be use-cases, of course. I could imagine that pausing looping child timelines would be useful, but I remember reading that adding a looping child timeline essentially sets the parent timeline's duration to infinity (which is kinda bad) is that right? Answers on a postcard please...

Grrr. This doesn't work on a more complex timeline! There seems to be a delay of 100-200ms so the animation, even though it is supposed to have seeked, is still past the point of the supposed pause. They seem to be rounding errors, as telling the main timeline to seek to the rounded value via the console sorts everything out. The current child timeline is the 7th added to the main one, if that helps. Is there any way round this? Currently I'm having to add dummy-time round each of the pauses so that the scene doesn't appear to animate-on.

Here's a Pen of the first method: http://codepen.io/davestewart/pen/eHlit?editors=101 It's perfectly valid code, but feels like a lot of code for something that should perhaps be in the core API. I'm considering adding some kind of pauseParent() function to the Prototype that would wrap all this up in a method, and allow me to pass an optional callback (seeing as the built-in pause() doesn't allow you to): tl.pauseParent(tlMain, callback); Hopefully there's some hidden feature I've missed though and someone's about to tell me what it is (as usual )

Would be useful for debugging purposes to be able to link to uncompressed libraries.

I have a parent timeline which has a bunch of child timelines added. Each child timeline (scene) has to trigger a pause of the main timeline halfway through so that the app can display some information about the current scene. In essence, it's this: main ----+---------+---------+----> sceneA ----^----> sceneB ----^----> sceneC ----^----> Each scene timeline is built separately, then added to the main timeline. At the moment, I'm using a .call() from each child timeline to an intermediate function to instruct the main timeline to pause. However, there seems to be a slight delay on this, so the pause will happen a few frames off when I actually need the pause, so on-screen elements will no longer be precisely aligned. I've considered various ideas, but all seem to be either: code-heavy: setting child labels, calculating time offsets, seeking the main timeline, or hacky: instructing the child timeline to wait or even pause itself, then pausing the main timeline What's the best way to do this? Cheers, Dave

PS. Having written the xJSFL selectors library, I know what it is like to parse complex user-provided symbolic references! https://github.com/davestewart/xjsfl/blob/master/core/jsfl/libraries/elements/Selectors.jsfl#L157 And in the same vein as your clip() example above, here's an example of numeric ranges within attributes: http://www.xjsfl.com/support/api/elements/selectors#pattern-matching Having a flexible yet reliable syntax is key.

Sure. It makes sense to use this in the wider context of units. It's kinda difficult to glean everything from some of the rather long WordPress-themed pages, in this case namely that strings are required to declare units, rather than just relativity. Thanks for the input.

Ah, didn't know you could pass units. That changes things! Can you pass any kind of unit? [edit] Yes you can I didn't see this in the docs. I presume it's covered elsewhere?

Hi Jack, Was just wondering why we need to write "+=100" rather than just "+100". (This is going to be "one of those" posts) I looked through the TweenMax docs, and there wasn't one example where a value passed as a string wasn't relative. So my assumption would be that string values would always be relative I threw my assumptions into a Pen and it looks like string values consisting of only numbers, such as "100" are parsed to numbers, so absolute, not relative. String values consisting of "-=" or "+=" such as "+=100" are calculated relatively. But what about string values consisting of leading "-" or "+" symbols, such as "+100" ? Parsed to 0. So my thoughts are, what about assuming signed strings are relative, and allowing the developer to optionally drop the "=" ? Consider: // existing absolute TweenMax.to(el, 1, {x:100}); TweenMax.to(el, 1, {y:'100'}); // existing relative Tweenmax.to(el, 1, {x:'+=100'}); TweenMax.to(el, 1, {y:'-=100'}); // proposed relative TweenMax.to(el, 1, {x:'+100'}); TweenMax.to(el, 1, {y:'-100'}); The only issue would be if someone was passing negative strings such as "-100" in existing code, which would be cast to a Number, I think, by TweenPlugin._addTween(). This is the backwards-compatibility flaw in my carefully thought-out plan. But then one has to question why a developer would be passing strings as numbers in the first place. Anyhoo, it would make it just that little bit easier to write and read multiple sequential tweens. Thoughts? Cheers, Dave

I figure it's because it's using the last value of the Timeline, so I updated your kill line to do this, and it worked: timeline.go(0).kill(); I'm also new to timelines, so can't guarantee it's the "correct" answer.

There was certainly a learning curve with timelines and how best to put them together. I fell into so many traps it was unbelievable! Coming from an ActionScript background as well, even though I write oooodles of JavaScript, and have done for years, I was trying to shoehorn a lot of stuff into Prototypical classes too, when I think perhaps JS / GSAP timeline animation is easier to setup when pursuing a more functional approach. There was also a lot of decisions to be made about structure, elements, declarative vs programatic instantiation, non-timeline related animation, spritesheets, not-spritesheets, GIFs vs PNGs, interactivity, to utilise the structure and support of a library like Backbone to organise the application, to use jQuery widgets to manage states... the list goes on and on, and in fact GSAP was only one component of it all, albeit an extremely important one, and one without which the fully-animated story-telling would no doubt be impossible. I'm going to write a blog post about the journey though all these different areas when done, and try and distill some of the learning (of which there's been a LOT) for this type of project. Interestingly, still no one has replied to my preemptive post regarding any existing animation scene managers. Ironically, perhaps I will be the first to answer my own post! So, that's it for now. Thanks loads for your support. It's been invaluable. Cheers, Dave

Tears of relief and joy Jack, tears of relief and joy! The whole project has been a lot more complicated than I thought when I took it on. I'm a week behind an already tight turnaround of 5 days, with a lot of unknowns and WTFs for myself, which translated into stress and heavy expectation management for my client, and their client. I hate to speak too soon, but I think this is the last hurdle vaulted...! In regards to your point - I totally see your point there, and don't think you should change either. However, what about a new .reset() method? It would work the same as set(), yet be explicit-enough to do exactly what it says on the tin. I've already added a bunch of methods to the TweenMax and TimelineMax prototypes, one more won't hurt! TweenMax.zIndex = 1; var methods = { reset:function(element, props) { return this.set(element, $.extend(props, {immediateRender:false})); }, show:function(element) { return this.set(element, {autoAlpha:1}) }, hide:function(element) { return this.set(element, {autoAlpha:0}) }, fadeIn: function(element, time, props) { return this.to(element, time || 0.5, $.extend(props, {autoAlpha:1})); }, fadeOut: function(element, time, props) { return this.to(element, time || 0.5, $.extend(props, {autoAlpha:0})); }, wait: function(time) { return this.to({}, time || 1, {wait:0}); }, raise: function(element) { return this.set(element, {zIndex:++TweenMax.zIndex}); } }; $.extend(TweenMax.prototype, methods); $.extend(TimelineMax.prototype, methods); Cheers, Dave

Brilliant! Will look to post something on GitHub this weekend too so you can use it in your non-CodePen projects

Jack, I'm so happy I could cry!!! I tried that and it now works perfectly. There's been a lot of set up for this, and I was beginning to wonder if it was all going to be a big fat waste of time. I'm so relieved, I could actually relieve myself. I'll have to read through your very informative post a couple of times, but I get it, in general. With regards to the edge case / logic condition - what about the possibility of skipping the optimization of .set() calls if they're at 0.0 in a Timeline? I seems to me that adding a few cycles to an animation when it starts is going to add a tiny, tiny fraction of the overall cycles that are needed for the whole thing. And if it's a top-level timeline, it wouldn't matter anyway, but if it's a nested timeline, it could be mission (rather than performance) critical, as you say, there's no way for a parent-agnostic Timeline to detect if it's nested or not. It's just a thought anyway - obviously I don't really understand what's fully behind that statement as I didn't write the engine. So I'm going to go and sob silently for a bit, then crack on with the rest of this when I've done that. Though I might have a beer first (it's Friday night here). And Rodrigo, thanks for putting some more time into providing a workaround too. All the best for now, Dave

And it happens only when you click on the timeline? Do you get any errors as the page loads? P.S. Don't notify CodePen yet - they might decide to strip script tags!

Hi Rodrigo, Thanks, but simply resetting ALL .location elements halfway through the main animation isn't my goal. That was just a hacky alternative attempt (to see if it made any difference) to work around GS not resetting properties within the individual timeline() method, before returning a new Timeline instance. Think perhaps I will delete that Pen if it's confusing the issue! Check out the original Pen (cited at the top) to see what I want to achieve: http://codepen.io/davestewart/pen/keJpE?editors=101 I want each timeline() method (there will be variations on this) to be responsible for resetting its own elements: FYI, the methods also aren't chained in this example, as in the final version of the code each child Timeline will be added to the main Story timeline via dependency-injection, so I didn't want to imply that it would all be done in one place: Cheers, Dave

Weird, I don't get that even when I use it from a non-logged-in browser. There's nothing to load in either... odd. Extension maybe? Tried it in another browser?

The "animated progress bar" is draggable / scrubbale and shows the current time as you do so.... do you not get that? The spans in the controller are used to set the label positions, but it should be the .left, not the .x. Anyway - some bugs to be ironed out perhaps!

Hi Jack, OK, check this out: http://codepen.io/davestewart/pen/keJpE?editors=101 It's an animation for a company explaining what they do, and is based around various locations such as "street", "store", "bank", etc. which we will revisit at various points in the story. Here's the (technical) low down on the above test PEN, which is a less complex version of how I plan to animate the final version: There are 3 main HTML elements (locations) Each location will contain various child elements (sprites) To animate these locations and sprites there are 6 TimelineMax instances (scenes) Each scene (Timeline) does the following:Globally-increments and sets the z-index of the location element (so it will appear over the previous location element, so it can fade in) animates the location element autoAlpha from 0 to 1 animates the sprite element .left from 0px to 200px Each scene will be added to a global root Timeline Animation-wise, it looks somewhat like this (numbers are alpha, the reversed-order what the the z-index animation should result in): root timeline : -----------------------------------------------> scene 6, bank : 0--1---> scene 5, store : 0--1---> scene 4, street : 0--1---> scene 3, bank : 0--1---> scene 2, store : 0--1---> scene 1, street : 0--1---> I've added various .set()s to the child timelines to reset the various animated properties when the timeline starts. However, I'm getting really unreliable results on the 2nd set of timelines, which animate the previously-animated locations and sprites: On the first play of the root timeline, there's no visible update from scene 4 onwards (I'm pretty sure this is a location z-index issue, where scene 3's office is not allowing scene 4's street to show) On the second play-through and subsequently, on the last 3 scenes, the smooth .to() acts like an abrupt .set() (I don't know why this is - feels like a bug) I just don't understand what's happening here, or why I can't seem to-reanimate previously-animated properties. Or are the sub timelines animating the same elements conflicting somehow? I would have thought if one had finished animating, a new timeline could take over the animation. In the final animation, there are 4 locations (HTML) and 11 scenes (Timelines), each of which will control multiple sprites within each location. My worry is that this approach of re-animating content just doesn't work. Would really appreciate some input! Thanks, Dave

I've noticed from the homepage demo that one often needs to manually set properties on elements before animating them: // create timeline var tl = new TimelineMax(); // set properties TweenMax.set(el, {autoAlpha:0, left:0}); // animate tl .to(el, 1, {autoAlpha:1}) .to(el, 5, {left:100}); Am I correct in thinking that this is to set reference keys so that the object will animate correctly when animated by other timelines? I'm a bit woolly on this one to be honest, but my testing, and looking at the homepage animation confirms this to be so, at least some of the time.. I've also noticed that just setting the properties using the Timeline instance alone (and not separately, via TweenMax) doesn't always work. I think this has to do with when set() is the first item in the timeline, it fails. Adding anything before allows it to succeed, so I seem to be adding lots of needless code to let this happen. Is that correct? If someone could explain exactly why we need to do this, and what's happening conceptually or even practically with a Pen, that would be great. Cheers, Dave

Glad to give something back! Yes, I've now added it to all my GSAP Pens, and they are much tidier and much easier to use: http://codepen.io/collection/Bulzw/ I've also broken out the code (locally) so it's a set of standalone classes which I'll be putting on Github soon. It's super easy to use, with a bunch of configs that can be configured via options, script attributes, or via the API. The easiest way to instantiate the controller and attach it to a timeline is by simply including the script tag with some custom attributes: <script src="/vendor/gs-ctrl/gs-ctrl.js" data-parent="body" data-timeline="tl"></script> The script will load, then load in the UI from a separate HTML file, load the styles from a separate CSS file, then wait to attach itself to the global variable tl (or anything else you specify), and you're up and running, just like that, no need to write any JS at all. Of course you can do it manually as well, if you want. (I aim to port the automatic attachment to the CodePen widget too) I'm toying with the idea of allowing multiple instances too. Shouldn't be too hard, but haven't had the need yet. What I would really like would be a designer to make it look nice. Something cool, flat, with perhaps some nice accent colors. If anyone wants to fork the pen and get started, that would be great!

Flash wouldn't have done this

Nope! It loads the rest of the images, and passes any failed images to onError.