Jump to content


Staggered slidein, wait, slideout n times and then slidein first item

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'm trying to create a simple (generic) animation.


I have a working POC but would like to know if there are any improvements that could be done that I'm not aware of (only started using greensock yesterday - awesome library!)


At the moment I'm using two staggerX since I couldn't get a 'wait' period without it.


Also I needed to use an onComplete handler since xxx.repeat(n).fromTo produced unexpected behaviour.



See the Pen RNvdbx by loraderon (@loraderon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Thanks for creating the demos, very helpful, and nice job for day 2!

However, from your code it is difficult to ascertain what the desired behavior is.


I'm guessing you just had trouble with the repeat, so let me know if this works for you:



If not, please describe the exact behavior you want and I'm sure we can show you a solution.

  • Like 1
Link to comment
Share on other sites

ah, I just saw your Topic title has a bit more of a description in it.


One approach for getting the first box to slide in again is to just tell the timeline to call a function onComplete (when all iterations are done) that will simply jump back to a time of 0 and play the first animation again using tweenFromTo(0, animation) like this




However if you want 1 timeline to contain all iterations of the staggers and then a single new iteration of the first items animation at the end it gets a little trickier but totally possible.


in a nutshell:


Create 1 timeline that repeats that contains the staggered sequence.

Nest that timeline in a parent timeline

Add an animation to the end of the parent timeline that re-introduces the first item.




You mentioned that doing multiple staggerFrom()s gave unexpected results. 


One of the trickiest aspects of the entire platform is how the immediateRender property works when multiple from() tweens are trying to control the same properties of the same objects. 


In simple terms, from() tweens always render their starting values immediately. Imagine you want to animate 3 objects fading in from opacity:0 to opacity:1 one after the next each with a duration of 1 second. 

TweenLite.from(obj1, 1, {opacity:0})
TweenLite.from(obj2, 1, {opacity:0, delay:1})
TweenLite.from(obj3, 1, {opacity:0, delay:2})

Chances are you would want each item to have opacity:0 set immediately so that they would all be hidden from the start. So even though obj3 may not start animating until its 2-second delay transpires, it should have opacity:0 set immediately. That's why from() tweens have immediateRender:true by default.


However if you try to do multiple from()-based animations on the same properties of the same element, immediateRender:true can give undesired results.


consider you want obj1 to fade in from opacity:0 twice


TweenLite.from(obj1, 1, {opacitty:0})

TweenLite.from(obj1, 1, {opacity:0, delay:1});


If you run that code, you will only see obj1 fade in once.

The reason is because the first tween immediately sets the opacity to 0, which means that when the second tween wants to record its end values (which are the current values) opacity is already 0. So its trying to tween from 0 to 0. 


The solution is to tell the second tween to wait until it is scheduled to run (after 1 second delay, which is after the first tween has run and has set opacity or obj1 to 1) by using immediateRender:false.


See it in action here:




I know that's a lot to chew on, hopefully some of it makes sense.

  • Like 1
Link to comment
Share on other sites

I got caught up in some other stuff but the tweenFromTo(0, animation) tip was great!


I also modified the code to allow arbitrary (2+) number of elements.


One minor glitch now is when the animations repeat, there is a slight delay but I think I can live with that.


Codepen URL: 

See the Pen azxGKY?editors=101 by loraderon (@loraderon) on CodePen

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.