ElliotGeno

Hopefully we can get this ease added to the code base! Although I heard rumors Jack has other plans for easing. So I am not sure about the likelihood of that.

I just modified the existing Back.easeOut and Back.easeIn. They are essentially split it in two and reversed. The other half is actually the Expo ease if I remember correctly. It seemed to be the closest to the the speed of the Back motion.

I created a new ease that I find myself using a heck of a lot. You could think of it kind of like a backwards Back ease but with some additional smoothing towards the opposite end of the ease. I call it Anticipate. Its great for cartoonish-like motion where there is a build-up followed by a follow through. Picture a baseball player winding up for a pitch and then letting the ball go and it slowly comes to a stop in space. The ball would momentarily go backwards and then fly fast for a while until it came slowly to a stop. This type of animation is a lot more organic than your typical Back.easeOut. If you'd like to try it out... I modified a version of TweenMax to include this ease: TweenMax With Anticipate Ease Or just fork the CodePen demo.

I am not sure what the "bug" was, but the intention was to have the text counter-rotate thus looking straight at any angle. Diaco's solution seems to work great! Thanks everyone!

Does this work for you Jack? https://dl.dropboxusercontent.com/u/1256960/%20Research/JS/SunCalc/index.html

Yeah... The font dropped out, but it worked... Firefox 38.0.5 on the mac

Diaco fixed it! I was able to rotate it myself with the transform attribute... so I knew it wasn't a browser bug.

I think I stumbled on a bug trying to rotate text elements in SVG with Greensock... It completely ignores the rotation of the text for both the house and the sun... TweenMax.set(sunDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); TweenMax.set(houseDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); Any ideas?

I am looking into this option... I saw possibly a neat way to leave it as an object tag but then replace the object tag with the svg. That might be even better.

So you are suggesting loading the svg and appending it to the document?

One really nice way to clean up your HTML is to get rid of inline SVGs and opt of object tags like this: <object id="mySVG" type="image/svg+xml" data="images/PrettyArt.svg"></object> The problem with this, is that it is technically a separate document. So the following doesn't work... TweenMax.to("#myObject",.5,{opacity:1}); It would just fail to animate, and worse, it would fail silently so I had no clue why it was failing! To make this easier to handle, it might be nice to either have some sort of logging if it doesn't find the queried object. OR the ability to either include a specific target document to query. One way to achieve this, would be to "register" the SVG document with TweenMax. Something like this: TweenMax.register("#mySVG"); In this case, TweenMax would query the current document for "#mySVG", it would find the object tag and include this document to also traverse if no objects were found in the root document. Obviously, this would work great for including one document, but multiple documents per page could be used. And that would muddy up the results of the query selector. So maybe another strategy should be used instead. What if you could force which document you want to select from... for example what if you could add a fourth/optional argument? Like this: TweenMax.to("#myObject",.5,{opacity:0},"#mySVG"); This would allow you to optionally include another document or a list of documents to query.

What if we took a different approach? What if you did something like TimelineMax does instead? Create a method chained way of adding tweens to events so you don't have to create method for each type... TweenMax.event().to(); The original example becomes this: TweenMax.event("#myButton","click").to("#menu",.5,{top:100}); TweenMax.event("#myClose","click").to("#menu",.5,{top:0}); Because event() would return a reference to TweenMax, you could chain any existing TweenMax method to this event. You might need to also add a conditional to check if an event is triggering the tween versus calling the tween outright. As for touch events, I wouldn't worry about them... generic events could cover a vast majority of the events you encounter. If someone is handling touch events or needs to tie the handler to the event details any closer... they are likely building something a bit more involved anyway.

One thing I always find myself doing over and over again is using a query selector to access elements that aren't going to be accessed by any other code. Pair this with additional for loops for adding logic to multiple elements, and you add a lot of additional code. I am tired of typing all this! It would be great to be able to trigger a tween based on a click or other event without having to break out of the TweenMax selector engine style. For example, lets say I want add a drop down menu, normally my code would look like this at it's simplest... var button = document.getElementById("myButton"); var close = document.getElementById("myClose"); button.addEventListener("click",open); close.addEventListener("click",close); function open(e){ TweenMax.to("#menu",.5,{top:100}); } function close(e){ TweenMax.to("#menu",.5,{top:0}); } What if tween max could chain an event callback to a tween method for you? The code could use the same selector engine, and just add a callback or a tween like this: The resulting code would be identical to the code functionality above: TweenMax.eventTo("#myButton","click", "#menu", .5, {top:100}); TweenMax.eventTo("#myClose","click", "#menu", .5, {top:0}); Things could get really interesting if you could accept arrays: TweenMax.eventTo(["#button1","#button2"],"click",["#object1","#object2","#object3"],{top:100}); Or even callbacks! TweenMax.eventCall(["#button1","#button2"],"click", open, someArguments); So the basic signature would be as follows: TweenMax.eventTo(event dispatchers, event string, targets, tween properties); TweenMax.eventCall(event dispatchers, event string, callback, optional arguments); You could even trigger the event dispatcher as the target itself: var buttonList=["#button1","#button2","#button3"]; TweenMax.eventTo(buttonList,"mouseover","_self",{opacity:1}); TweenMax.eventTo(buttonList,"mouseout","_self",{opacity:.5}); Other tween types could be created too, for example: TweenMax.eventFrom TweenMax.eventFromTo TweenMax.eventStaggerTo TweenMax.eventSet

This one weird trick fixed my Safari bug. Thank you!

Sorry about not putting it into CodePen. I actually started down that road for you, but it wouldn't display my externally hosted SVG which was kind of integral to displaying this bug. http://codepen.io/pyrografix/pen/vEjvvP Do you know why it wouldn't display an external SVG file?

First check this link in Chrome, Firefox and Safari: Jug Bug Notice in Chrome and Firefox it animates the scent on rollover... But in Safari it only animates a portion of the tweens. Specifically, the transforms do not work in Safari when calling TweenMax.fromTo(). Interestingly, if you create a simple TweenMax.to() tween, it functions fine. But if you use TweenMax.fromTo() or try to use TweenMax.set() right before calling TweenMax.to() then Safari will not animate the transforms... just standard properties. I assume this is due to the special SVG browser handling in TweenMax... Most likely it's a bug with TweenMax.set() because I assume TweenMax.fromTo() is just a helper method that actually calls TweenMax.set() before calling TweenMax.to(). Right?

The Flash version used to have a plugin for Dynamic Props which allowed you to continuously update the properties. Is there something like that for the HTML version? Even being able to simply call TweenMax.updateTo(targetObject,.5,{property:newPropertyValue}); would be awesome... The problem is when it completes, you can't call updateTo again. Instead, you need to check to see if it is tweening and call updateTo() or if it stops call to(). It would be great if updateTo would simply create a new tween if it already finished.

I found the culprit! It is because the SVG is not appended to the document before applying any TweenMax stuff to it. The solution was to temporarily appendChild to the document after initing the SVG object. Then appending the child elsewhere to place it. ColorWheel Fixed

Seems like its a Firefox bug with getBBox(). How do you work around this?

I wonder if anyone else got this error on Firefox... NS_ERROR_FAILURE ColorWheel Bug It seems to be a combo of TweenMax and SVG in Firefox in Mac and Windows. Chrome looks correct. There should be two color wheels on the bottom of the screen. Pressing and releasing them should select colors.

It wasn't my example. This is an example that is given on Greensock's website. Either way, it's a bug and I reported it. If it gets fixed, that's cool. If not I am not using it... So it doesn't matter to me much! Just thought people would like to know.

Split Text Bug (Requires Flash) It looks like it starts to animated and then about 80% of the way through it snaps to the final transform. Also checked it in Firefox and Safari. Firefox doesn't skew like the others. Safari was the only one that looked correct in my opinion.

Mac OSX on Chrome. If you slow it way way down to like 4 seconds per character, you will see it easier. I will record something to show you.

Actually every character with a space after the first line. And the last character of the first line.

While browsing your examples on codepen, I noticed SplitText has an issue with the last character of each word. Looks like it only translates it and doesn't transform its scale or rotation. Keep clicking the animate button and watch those specific characters at the ends. Pretty much any character before a space gets messed up.