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.