Jump to content


Can you make templates for simple UI animations?

Moderator Tag
Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:


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?



See the Pen mqsnk by julianshapiro (@julianshapiro) on CodePen

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

hmm , actually your demo is .staggerTo()/From() tween , not simple tween .


you can define stagger tween like this : 

See the Pen pJmjgJ by MAW (@MAW) on CodePen


function anim(elem,dur,stagger){  return TweenMax.staggerTo(elem,dur,{x:100},stagger) };



btw , you can define as timeline like this : http://greensock.com/forums/topic/11594-modules/?p=47247

  • Like 3
Link to comment
Share on other sites

I'm having a hard time understanding the value of this. What's the difference between what velocity is doing and a function that creates a tween?


So GSAP doesn't do that out of the box, but I made a quickie version of the Velocity Effect. Just pass in array of objects with the duration, vars, and/or a label. You could modify it to have other options like a total duration, tween types, callbacks... basically whatever you want.


See the Pen YXbyPL by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

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?



Link to comment
Share on other sites

I didn't event realize this was a two-part question  :lol:


Do you have an example of what you're going after?


But... always keep a reference to your animation so you can pause/resume and keep track of its progress value. Not sure if you know this, but GSAP stores all the transforms on the element for quick lookup which makes it real easy to find the x,y,rotation,etc... values.

// Lookup values on your element like this
var x = myElement._gsTransform.x;
var y = myElement._gsTransform.y;

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

You want to stay DRY, so that could be done with one tween. Remember that you can reverse them. And you should use 'y' instead of 'translateY'.


If you could provide an example or make a CodePen of what you're trying to do, we could provide better assistance.


Here's a recent thread about reusing tweens. I know it's not doing what you asked, but it was a good learning lesson for some of the beginners.



And the example I forked to show how to toggle and reference tweens. 

See the Pen vObmBR by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

These are great examples for what I need, thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.