porting from velocity - transition replacement

[gkatz]

Hi all;

first time here. I am trying to port from velocity and looking for a proper replacement for the velocity UI Pack transitions concept which allows you, while staggering, to have the elements transition into their place (like a mini animation). see http://velocityjs.org/#uiPack

is there a builtin replacement for this in GSAP?

here's an example of a slideUpIn built in transition with velocity (self explanatory) 

thanks for your help!

See the Pen KgOZbM by guykatz (@guykatz) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demos. GSAP has a variety of "stagger" methods to give you precise control over those types of effects.

 

Here is a 1-line solution:

//animate each element for 1 second at 0.5 second intervals
TweenMax.staggerFrom(".overlay", 1, {y:50, autoAlpha:0}, 0.5);

 

https://codepen.io/GreenSock/pen/ENWvEj?editors=0010

 

In GSAP autoAlpha automatically and intelligently toggles the css visibility property when doing opacity animations.

I set visibility:hidden in your css (instead of display:none) to allow me to animate from an autoAlpha of 0 (visibility:hidden, opacity:0)

 

We don't currently have "canned effects" like slideUp, fadeIn, rotateOut etc, but they are very easy to create with GSAP.

 

Be sure to watch: http://greensock.com/stagger