Jump to content
Search Community

Creating multiple steps while using staggerTo or staggerFromTo

vimalPatra test
Moderator Tag

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

I am trying animating a bunch of objects staggering one by one, but i want to do multiple things to do to a single element and i cant find a way. 
For example say, I have ten cubes, first of all i want the first cube to rotate 45 deg in X then it goes y = -400 then it comes back y=200 and then it rotates back 45deg and the same things happen to the following cubes after wards. So, essentially there are 4 steps i need to define.

If i use staggerFrom it places me from one point to Original one, If i use staggerFromTo its again two way , and i cant chain them as the second will only start after the first staggerFrom finishes (i.e., all the ten cubes finish step 1). So tell me a way in code to do this.

As I am pretty new doing these i can't really figure out a way to do this. But I know it is doable as i have seen all the crazy impossible stuff's done with gsap w/o a hiccup, and this is something simple that can be also done with css (but it will be too time consuming). 

So.. I am waiting for some cool animating and tips to be made.

Link to comment
Share on other sites

Hi vimalPatra  :)


Welcome to the GreenSock forum.


Using from() tweens can be troublesome when you have multiple steps like that. I'd recommend to() tweens for animations with a lot of steps. You could possibly make this work with a stagger, but I think I'd recommend using a loop and jQuery's each method to create a timeline for each element. You can then use the index of the element to create a delay for the timelines. You can wait until the previous animation is finished or overlap them slightly etc. I'm using hard coded times for the timeline and delay, but you could make that a variable as well for maximum flexibility.


Here's a quick pen to get you started.


See the Pen QdaVKp by PointC (@PointC) on CodePen


Hopefully that helps.


Happy tweening.


  • Like 3
Link to comment
Share on other sites

Great demo and technique, Craig.


Disclaimer: Craig's way of creating a timeline for each cube and then placing each of those timelines in a parent is the way I would 100% recommend. The code is logical, clean, and easy to read. It allows you to focus on what just one element should do, and then you just repeat it a bunch of times for the other elements.



The following alternate approach is shared simply for educational purposes to illustrate how some hooks in the API allow you to solve the same problem in a less elegant way but without a loop.


The challenge in trying to get multiple staggered animations to play in direct succession like this is that you need to know the time the first tween in the previous staggerTo() ends so that you can start the next staggerTo() at that time. You can figure this out if you understand that:

  • someTimeline.staggerTo() actually creates a new TimelineLite of tweens and adds it to someTimeline
  • someTimeline.recent() returns the most recently add tween, timeline or callback

Using that info we can get access to the timeline that the previous staggerTo() created, get its startTime(), and also find the duration() of it's first tween. This information will lead us to the exact time the first tween in the previous staggerTo() animation ends


I put this logic in a very inconvenient-to-type method named getEndTimeOfFirstTweenInPreviousStagger()


You can see it in action here:




Again, this is admittedly an awkward way to do it. Strangely enough I stumbled into this solution just this week when I misunderstood something someone else was doing. I found it a weird coincidence that this method could be applied in this context and hold up to quite a bit of variety. However, beginners need not worry about this as Craig's way is the way to go. Nested timelines FTW!

  • Like 1
Link to comment
Share on other sites

Yeah - that code isn't for the faint-of-heart beginner, is it?  :blink:  :D  


That's pretty cool Carl. It took me a couple minutes to understand what you were doing there. But once I studied it a bit, it makes sense. Nice!


What in the world were you working on that you accidentally stumbled into that?

  • Like 1
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.
  • Create New...