Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to create A Stagger Effect with different directions

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

Hi i'm trying to create stagger effects on my app dashboard, but the problem is i follow all the documentation guide lines, but there is no way to create Stagger that trigger different directions. only the given parameters and all object stag to the same pattern, but i need to stagger it from different directions.


eg :


Use case scenario that i'm trying to archive.


1). Top bar comes in document top position

2). Sidebar comes in right side

3). Body element comes in bottom and so on..



i know i can use Timeline Max for this situation, but i need to create this from stagger Effect for re-usable purpose. and trigger from click event

Link to comment
Share on other sites

I don't understand why a TimelineLite /Max would not work for this. It would be completely re-usable and you could also control it from a click. 


Can you make a small demo that illustrates why it doesn't work, or what you need to do?http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/


Keep in mind that TweenMax's staggerTo() and staggerFrom() methods are only useful if multiple objects are tweening to/from the same values (not what you need to do). Also these methods return arrays of tweens which are not easy to control as a group. From the information provided, a timeline is a much better solution. 

  • Like 3
Link to comment
Share on other sites

Actually i'm planing to use GSAP for upcoming Enterprise HCM Web App Revamp with AngularJS. so you already know there is lots of workaround to implement Motion UI, and that's why i ask that question. anyway thank carl. i'll use TimelineMax to do it. i already did that. but i thought i can use stagger effect to do those more easily, thank carl, thank you very much for the guidance, once i implement those Motion UI and the other stuff will share with you. :)

Link to comment
Share on other sites

Hello All,


Thank you Carl for that explanation on the Stagger methods being used for elements that will only have the same values, since they are treated as a group. Very Helpful ;)


yashi, maybe you can use the GSAP to() method in a loop  instead?


The to() tween in a for loop :


See the Pen Croyi by jonathan (@jonathan) on CodePen


the to() method using jQuery each() :


See the Pen zxKOoG by jonathan (@jonathan) on CodePen



Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

Hi Yashi,
Are you using Foundation to build your app, and what are you trying to do with Motion UI? It sounds like you are looking for a way to animate route/view changes.
I made a little demo to demonstrate how to do this with UI Router, which is what Foundation uses. No need to mess with Motion UI.


Plunker URL: http://plnkr.co/edit/UOp1ZD?p=preview


  • Like 2
Link to comment
Share on other sites

thanks blake. actually this is what i'm try to archive and also i'm using Foundation for app. but the problem is i don't like default behavior they give us. i want to create my own Motion Ui for different views. do you have any idea about that, and how to do it.if have please share a link, what you have done. and by the way. thanks for the demo.

Link to comment
Share on other sites

Motion UI is garbage. Thankfully, you don't have to use it, and creating your own isn't that hard.


If you can explain in more detail what you would like to do with the views, and how you want to customize them, I will be able to provide you with some examples. 

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.