Jump to content


Switch rotation direction for each iteration of stagger

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 can imagine some complex ways to do this, but wondering if there is a simple programatic approach to  switch direction on each iteration of stagger command so first spins clockwise, second counter, third clockwise, etc... to simulate gears spinning.


.staggerTo(item, 3, {rotation: "360", repeat:-1, repeatDelay:15, ease:Sine.easeInOut}, 1.15)


does everything I want except for the switching of direction each time.


Is there a simple way to do this without nesting functions?

Link to comment
Share on other sites

If I understand your question correctly, it should be as simple as adding yoyo:true. Does that help?

Link to comment
Share on other sites

I understood the question a little differently as each element in the targets Array should alternate directions.


Keep in mind that a single staggerTo(), staggerFrom() or staggerFromTo() the properties (and values) that are being animated must ALL be the same. In order to get an alternating staggerred animation I have 2 suggestions:


// alternate rotation of green boxes by using a loop to insert staggered tweens
var greenAni = new TimelineLite();
$(".green li").each(function(index, element){
 //if index is even then rotate in +360 or odds go -360
 greenAni.to(element, 1, {rotation:(index % 2) == 0 ? 360 : -360}, index * 0.5)

// alternate rotation of blue boxes by using jQuery's odd/even filters
var blueAni = new TimelineLite();
blueAni.staggerTo($(".blue li:even"), 1, {rotation:360}, 1)
       .staggerTo($(".blue li:odd"), 1, {rotation:-360}, 1, 0.5);


  • Like 2
Link to comment
Share on other sites

as follow Carl's great solution ; you can use CSS selector too , instead of jquery selector  :


var blueAni = new TimelineLite();
blueAni.staggerTo(".blue li:even", 1, {rotation:360, scale:1.2}, 1)
       .staggerTo(".blue li:odd ", 1, {rotation:-360, scale:0.8}, 1, 0.5)
  • Like 1
Link to comment
Share on other sites

Yup! Diaco is right!

updated my pen.

  • Like 1
Link to comment
Share on other sites

Yeah, that's pretty much what I came up with too... selecting which direciton via css selectors.  Just wanted to make sure there wasn't some simpler method already built in that didn't require multiple (staggered) stagger commands and adding css classes. New to GSAP and wanting to learn to use it as efficiently as possible.... especially since I've got a few much more complicated concepts in mind that I'll need to work my way up to.  Will apply above as soon as I get a chance.



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.