Jump to content
Search Community

Stagger animation

Eugene Rayner test
Moderator Tag

Go to solution Solved by PointC,

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

  • Solution

Hi erayner_45092 :)


You're close. You just forgot the stagger amount so it defaulted to 0. From the docs:


stagger : Number
(default = 0) — Amount of time in seconds (or frames for frames-based tweens) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+=100", opacity:0}, 0.2).
Does that make sense?
Happy tweening.
  • Like 3
Link to comment
Share on other sites

Awesome, works perfectly. Just have to pay close attention.


1 last question, is there a way I can make both animations work at the same time?

I have updated codepen so that I have stagger1 and stagger2 running at the same time (my code makes it run one after the other and I would like at the same time.)


EDIT: I think I just need to add an extra class - but not working the way I thought it would.

Link to comment
Share on other sites

You'd need to use the position parameter like this:

var svgTween = new TimelineMax({delay: 0.5});
svgTween.staggerFrom(".stagger1", 0.5, {opacity: 0}, 0.1)
svgTween.staggerFrom(".stagger2", 0.5, {opacity: 0}, 0.1, 0);// the 0 on the end is the position parameter

More info about that parameter:



Just an FYI - you had a stagger property in your vars object (which I removed in my answer), but the stagger only goes on the end.


Also - in a non-stagger tween, you could just target both of those classes in the tween as GSAP can target an array, but with a stagger tween that wouldn't have solved the 'start at the same time' problem.


Happy tweening.


  • Like 3
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...