erikb

Discovered some strange behavior in my code. Looks like TweenMax's removeEventListener is not taking the scope of the added listener into account and thereby removing other scoped callbacks' listeners. Advise? Looks like the issue is here: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L6047

Yes, in the pen it is working well and seems to be a good fix for that issue. I have not been able to swap it into my larger project yet because... deadlines

new library applied to my codepen here: http://codepen.io/jedierikb/pen/qZeWjO?editors=0010

Looks like negative priorities work on the ticker, yahoo!

I don't mean to hijack the thread -- but maybe this is the right thread for an issue I am having? Here is my situation: My engine tweens multiple values on different javascript objects (and also receives network data which can influence tweened values). On the ticker event (priority 1), my engine looks for differences in the current and previous state of the javascript object (using a JSON diff library). If there is a difference, I use the values from the current javascript object to update multiple css properties on different elements. However, it seems I am suffering from a one frame lag in my animations. This is because the tweened values get updated on priority zero, and my ticker event does not get a chance to pick up those changes until the next RAF on priority 1. Can I make my ticker have a negative priority? Or can I change the priority value on my Tweens?

Ran into an issue this morning with the TweenMax.ticker.addEventListener. Let me explain what I am doing and why it was a problem. I was adding a tick event listener to a controller object which will send out diffs from a model to views. (granted, this is not the primary use of your library, but as I use your library already, why not use its RAF functionality?) Problem was that the initial diff object was being sent immediately, even before all of the components who need to listen for these events have been instantiated. I traced the issue down to this line: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L5989 To work around the issue, I create a dummy tick listener and remove it right away: //wake up the tick engine so that our next call does not fire immediately var removeMeFunc = function() { console.trace( "wakey wakey"); }; TweenMax.ticker.addEventListener('tick', removeMeFunc, this, false, 1 ); TweenMax.ticker.removeEventListener('tick', removeMeFunc ); It would be nicer if there was an option I could set on the library to wake up the ticker without this workaround. Is there such an option or maybe a better approach? Thanks.

just a heads up: I googled 'greensock tick listener priority' which brought me to this page: http://greensock.com/?class_element=js-tweenlite-target which had the information I was looking for (yea!), but seems to have its navigation control panel on the left side bonked (missing graphics, search does not work).

It might be helpful to include this utility as a static helper function within the library itself. I find myself back on this page time and again.

Any update on this colorful issue?

Looks good. Thanks. http://codepen.io/jedierikb/pen/pyYXQa

Got snagged by having a zero duration tween in a timeline fire before it should. Worked around it by setting a duration really close to zero. Bug? Thanks.

Thanks for this patch. I will be able to test it next week.

Came across a snag -- an empty TimelineMax does not fire its onStart events, but does fire its onComplete events. In contrast to this example: http://codepen.io/jedierikb/pen/eZPGrb Is this a bug? It seems like it might be. (I am dynamically making tweens based on incoming data, hence the perhaps odd discovery )

Discovered this issue which caused me heartburn today. If you attempt (by accident of course) to set a css transform with a value of NaN, you cannot apply any css transforms after you've blotched it the first time. Might the library be changed to be more forgiving and not prevent future transforms from working?

Is there an example of how to use GreenSock to tween the values of css drop-shadow? Is the way to do it to tween the specific values I want to modify in an object and update the String onUpdate? Here is a link comparing drop-shadow to box-shadow: http://thenewcode.com/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

Was bit by this bug this morning. Checked the github issues, did not see it listed there. Is there a central location where developers can find "hotfixes" like this without digging through the forums? Much thanks.

How would I use TweenMax to set an interpolated color value given a start color and an end color and a percentage between the two? I am having to tween through a proxy object, and therefore using set. Still would like to leverage the css tweening power of greensock though. Thanks!

jonathon, thank you for your demonstration. Very informative!! I have to support ie-11, so, alas, preserve-3d is not an option. Which is a bummer. I've done a bit of hacking on your example to complete my understanding, but am not getting very far. I want to draw a triangle on the bottom plane, and then I want to animate extruding the sides of the triangle. In this sketch, I've tried to move the back face of the triangle to one of the other sides, but cannot seem to place it correctly. http://codepen.io/jedierikb/pen/vLZppa?editors=001 Suggestions? Much thanks.

https://connect.microsoft.com/IE/feedback/details/2232279

Having trouble bending css3d to my whims, even with greensock help. I want to put a #wall around the top edge of a #floor div (actually want to put walls over the #floor, but starting with a back wall). As you can see in my pen, I've got the floor laid down nicely, and the wall in (roughly) the right place, but I cannot get the right combination of css magic to make the #wall stand upright on the #floor. Click the #floor to give the house a spin to see how my 3d skills are lacking. Could someone point me in the right direction with my barn raising?

auto alpha still slow in ie-edge: http://codepen.io/jedierikb/pen/xZdBwx?editors=101 rgba solution is smooth as butter on ie-edge http://codepen.io/jedierikb/pen/bEWZVL?editors=101 Good hack there, Jack!

In Chrome (at least), when you include a codepen URL in a forum post and then [preview], the codepen URL is lost.

In IE Edge, noticed this pen is very slow (but fine in ffox and chrome). Figured out this performance hit disappears when removing the tweening of the opacity of the line elements. To keep the effect of the animation fading in/out, I experimented and found I can instead tween the opacity on the parent element #map, and performance is great. I suspect this is an IE Edge issue. Maybe there is someone at Microsoft you can push? I am posting here because it is very far and inbetween I encounter a performance snag when testing your library and was reminded of the old star-trek / star-wars hyperspace demo you used to have showing how great performance was with a jajillion elements moving at once. I figured you would want to know when the experience was not stellar.

In my example, shouldn't progress in an onUpdate callback for a 0 duration tween return 1?

Yes, thanks Jack. That is what I am trying to accomplish. It would be appreciated if you and your team could come up with a solution which allows developers to specify non-commutative transformation precedence for specific elements. Given this is the first time I've bumped my head using your library for transformation precedence, your intuition regarding the most likely order for most projects seems right on. But for cases like this, it would be nice to be able to specify what elements' preferences are.