Jure

These are great examples for what I need, thanks.

The transform values are very useful, thanks. The type of animations I'm using in UI are just general "slide-and-fade-in", "shake", "do a few things on rollover" - things that make it easier to direct the user's attention. I use forced transformations to make sure animations reset properly. Right now I'm thinking about using regular TweenLite calls like this: TweenLite.to(element, 2, { translateY: [20, 0], visibility: "visible", delay: 1, onComplete: someCallback }); TweenLite.to(element, 2, { translateY: -20, visibility: "hidden", delay: 1, onComplete: someCallback }); ... to fade in and slide in an element from the top. I'm wondering about best practices because this might be better achieved with a stored TimelineLite (animations might get more involved and have steps - shake for example) or maybe I can just use reverse instead of the second call?

Thanks for the suggestions - OSUblake, your "playEffect" function is similar to what I was looking for, I was just wondering is this kind of functionality is already built in without the need to create my own processing function. Might be an idea for the future to include this in GSAP. To answer your question about value - such an approach is very practical when building a lot of small UI animations that need to be hand-tweaked at first but then reused. TimelineLite seems a bit overkill for this, but it's a valid approach too. What about the second part of my question - is there a best practice for "fade in and slide from top" type animations - in a way that doesn't permanently change the element's position and can be stopped/called during another animation without issues? Thanks!

Thank you for the links, Diaco, but I didn't find the answer to my question. I think this is the closest: http://greensock.com/forums/topic/12040-replace-target-in-animation-instance/#entry49402 var referenceTween = TweenLite.to("#mydiv1", 1, {x:100, opacity:0.5, rotation:600}) function anim(elem, tween){ return TweenLite.to(elem, tween.duration(), tween.vars) }; var tween1 = anim('#mydiv2', referenceTween); var tween1 = anim('#mydiv3', referenceTween); But here you need to create an initial tween for the others to be able to copy its animation. I would like to create simple abstract animations that can be applied to any object anywhere. Similar to creating a class in OOP - I don't want to start with an instance. Is that possible with TweenLite?

Is there a way to create reusable animations in GSAP similar to what Velocity.js does in the UI pack? This is a quick code example of how it works there: First, you set up a custom animation template: $.Velocity.RegisterEffect("callout.pulse", { defaultDuration: 900, calls: [ [ { scaleX: 1.1 }, 0.50 ], [ { scaleX: 1 }, 0.50 ] ] }); And then you use it in a simple call: $element.velocity("callout.pulse"); I'm trying to make some UI animations and keep them as DRY as possible. I have a couple of elements that start with visibility: "hidden" (I need them to keep position and not collapse on hiding) and I want to fade them in + slide them in/out from up/down (and use a type-in effect for others - I'll try the SplitText plugin for that). Since I'm using these calls from various sources I need them to always remember their original position even if the animation should be interrupted by quick switching of views. I cannot animate anything that would affect the document flow (margin, padding etc.) but I'm fine with "translateY". If I use "+=20px" type animations it's hard to keep track of position. Is there a best practice for such simple UI animations in GSAP? Thanks.

Great work Jack! You did it to Flash, now you're doing it to CSS!