Gary

To be clear, I'm not necessarily suggesting that this should be "fixed." It works fine as implemented. A user can just manually add the extra rotation. I'm just pointing out that I ran into the same confusion that the original poster did. Maybe my comments will help anyone else wondering why skewY turns into skewX.

Use rotationZ (same as rotation) http://codepen.io/GaryC/pen/XJRrzP

I just ran into this. I had set skewY on an object and later rotated it 360 degrees. I expected, after the rotation, it would look exactly the same as before the rotation but instead looked like a skewX. It makes sense that skewY is a phantom value for performance, but this was a head-scratcher. Perhaps if rotationZ was added to the rotation of skewY instead of replacing it, that would be more obvious. That might require an extra variable in _gsTransform, though, which is not optimal.

Perfect! Thanks, Carl.

Is there a way to determine the current value of a property given the element, property, and position in the timeline? I'd like to allow the user of my tool to add some custom animation at any give point, and have the animation use the current value as input. For example, the width of an image might have changed earlier in the animation, or might even be in the middle of a tween. I'd like to be able to read exactly what the current value of the width is at a particular time. Possible?

Thanks for the responses, guys! Jack, I'll contact you directly because I want to describe some stuff that is not yet public, and I suspect there isn't much community benefit in it being posted here. Thanks, Gary

I have a conceptual question that I hope I can ask well enough to make sense. My software will enable the user to create full presentations, for example a slide deck. With a simple slide deck you have multiple slides, and each slide has things on it that might be animated. To build up the whole structure of a presentation, I am using a root TimelineMax and a nested TimelineMax for each slide. So, I create each child timeline, which might have lots of parallel activity (further nested timelines) and then I append the slide's timeline to the root timeline, and add a label so the user can move forward and back to the slides later. However, it appears that TimelineMax starts playing as soon as set() and to() is called on it. What I am really looking for is a way to build a timeline that doesn't play automatically, a group of commands per se. I know that I can call pause() right away but then I have a bunch of nested timelines that are individually paused, which don't play when the root (parent) reaches them. This problem is causing weird timing issues in presentations created with my software. I'm at the point where I think using nested timelines is not the correct solution, and that everything should be laid out in parallel on a single timeline, and calculate the start time and duration of all the commands manually for things that need to be sequenced. Hopefully I've explained this well. Thoughts? What do you recommend?

Awesome. Thanks, Jamie!

>> the only way you can create a TimelineLite or TimelineMax is through JavaScript in the first place. Yeah, but my code is not a simple script. It's a large object-oriented model, in Typescript, that recursively generates a hierarchy of timelines. I didn't think something like this existed, since I suspect few GSAP users use it like we do. It was worth asking, though. I solved the bug that triggered me to ask. If we need to, we'll build something to spit out Javascript. Thanks again! Gary

Our graphical animation editor, which uses GreenSock, will be online at www.snazzy.media in the next few months. We generate nested timelines dynamically, from a context model that the user builds with a GUI (with patent-pending snap-together blocks). It's all very cool and I'm looking forward to sharing it. However, we're running into a handful of weird timeline errors with the resulting animation. Since there is a lot of infrastructure on top of the generation, it is difficult to "visualize" a problem in code, and to create codepens. What I think would be helpful is some way to take a TimelineMax object and reverse-engineer it into Javascript. My question is; is there an existing way to create javascript for an existing timeline that, when run, would rebuild the same timeline? If not, is it even possible to do that? Does the timeline instance have enough state embedded that could be used to generate javascript? Thanks, Gary

Perfect! Although I'm using totalTime() instead. Thanks, Jonathan.

Maybe this is a newbie question, but here goes... I calculate the total time a tween will take, considering the delay, duration, repeat and repeatDelay. While the tween is running, I'd like to have a label count up from 0 to the total time. I have a div like this.. <div id="foo">0</div> What would be the best way to do a linear tween of the label to show the time as it is elapsing, preferably with no more that two decimal places?

D'oh! That's embarrassing. Thanks, as usual.

I'd like to build an animation where multiple things rotate around the center of the screen. I expected I would simply adjust the transformOrigin before tweening the rotation, but its not working as expected. Here is my codepen. http://codepen.io/GaryC/pen/LCnzk What am I doing wrong?

Thanks, Jamie. I changed the default overwrite to none and that fixed it. It looks like that changes it to a last-one-wins scenario, which was my original expectation. Thanks for the help!

Hi Matt. For observable javascript, I recommend using the model-view-viewmodel design pattern and the knockout library. If you're not familiar with it, knockout provides a great implementation of MVVM with observable properties and arrays. You can write comprehensive view models and bind your views right up to it, and everything stays in sync. The model that GSAP builds shouldn't be considered a viewmodel (ironic since it automates rendering). Instead, you would write a view model as a go-between, with observables, and bind your controls to them. Since the view updates the model through the view model, the view model knows when the model is changing, and can trigger a "proxy" observable in the view model that propagates changes throughout the view. Think of the GSAP model as a single unit. When any change is made to it, trigger the proxy observable to notifySubscribers (e.g. increment a number), and all your controls will update (provided they are bound to something that directly or indirectly subscribes to the proxy). Hope this helps.

Alright, this one's really got me scratching my head. The codepen has a simple timeline that spins some text in, pulsates the text in and out a few times, and then fades the text out. The pulsation works over and over again if you restart before the pulsation ends. However, if you let it continue on to the fade out tween and then restart, the pulsation no longer works. http://codepen.io/GaryC/pen/dLKsn?editors=001

Thanks for the details. It looks like there are good options. I don't mind writing the code to make it work. I may just punt for awhile and rebuild everything as changes are made, until I can prioritize it. I'll test your garbage collection code.

I tried updating the codepen I think how you described. I used labels when adding the timelines. Later on, I update the first timeline but it didn't push the second timeline out. http://codepen.io/GaryC/pen/Iquha?editors=001 I had seen Carl's video. It's great. Two things that I think are different than Carl's video is, first, he's making tweens relative, not timelines. The second, which is probably more relevant, is he is not changing the tree later. The labels are being used as it is statically built up in code. I expect my use case is not all that common as most GreenSock users build a static script. Thanks for the advice!

Makes sense, thanks. I was under the impression that because I didn't specifically define an offset for the second timeline, it was +0 relative to the prior sibling completing. In my app, I'm going to have a large tree of timelines and tweens. It's possible that an arbitrary timeline in the tree will change (e.g. a tween added, removed, duration changed, etc.). I'd rather not have to rebuild the whole structure to propagate the timing changes. Is there a method I can call, say on my root timeline, that refreshes the start times for the child timelines and tweens configured to start relative to the prior one?

Why does the tween on the second inner timeline start at seek(0) and not after the first inner timeline completes? http://codepen.io/GaryC/pen/xKbjg?editors=001

Well, that's unfortunate. I respect and applaud for ensuring great performance. I just don't think this would add any overhead, since CSS does it. I used contenteditable in my example just to show it. I actually don't know what the user or the data will embed. I'll muscle through it and try to get it to work, although I'll feel dirty writing a bunch of centering code that I used to get for free, and probably will not perform as well which will mitigate some of the GSAP performance gains. A lot of people are starting with center alignment because it is much more natural: Put something at 0,0 and it is always center of the screen, even if the window is resized, the device is rotated, etc. I believe this could be added to GSAP with zero impact on performance. Since I don't know where else to put wishlist stuff, I'll describe it here. 1] Add a vars special property named entityOrigin or entityAlignment or something like that. It's default would be 0,0 which is top-left. This is what it does now. The value could be an amount to shift the element (e.g. -50% -50%) or a position in the element like CSS' transformOrigin (e.g. 50% 50%) 2] If the special property is changed from the default, always emit a transform with a 2d translate that shifts the item in place. e.g. translate(-50%, -50%). If there are other transforms, put them after the 2d translate 3] The translate() function is always used just for entity origin. If the x: and y: properties are used, they are always put into translate3d() or matrix(). So you get both, a relative item shift for the origin and a translation to move the element around. Example: TweenLite.to(element, time, {x: 75, y: 90, itemOrigin: "50% 50%"}); Would emit... <div style="transform: translate(-50%, -50%) translate3d(75px, 90px, 0px)">Some Content</div> The browser, not GSAP, keeps the item aligned by origin (center aligned in this example). There isn't any performance cost in GSAP. Doing this would have little impact on GSAP performance and make it simpler to build encompassing effects like carousels and coverflows that are generally center oriented. Thanks for all the help.

Yep, pretty neat.

Love putting a call right in there like that. I extended Carl's example with a tweening of the cycling timescale so the wheels slow down and then speed back up again with the bike. http://codepen.io/anon/pen/HmcLa I'm a huge fan of GSAP. I just hope there is a solution to the transform problem so I can use it in my project.

Thank-you for all your help Rodrigo. Your example actually proved the problem. I forked it and updated it some. Run the codepen and click the +50 and -50 buttons. They do as you would expect. However, try typing into the divs and see what happens. GSAP is not emitting styles that keep it center oriented. Sure, you can write code that statically centers it when you first lay it there, but that would be a pain to keep varying sized things centered, especially when CSS does it for free. Also, try clicking the set 0,0. This sets the value to absolute 0,0 but loses the -50%,-50% offset that is making it center aligned. This needs to be applied each time the absolute value is set to overcome the natural left,top alignment. I think this might be a significant flaw with GSAP and might be a showstopper for me, which is a huge bummer since everything else is so amazing. http://codepen.io/anon/pen/LvmrC