Reverse a Stagger Direction (not reverse Timeline)

[emilychews]

Hi

 

If I have a staggerFrom tween that runs from left to right, is there anyway of having the stagger go from right to left on a series of elements?  I don't want to reverse the timeline because the stagger is part of a wider / larger animation and when I use the .reverse() method it obviously reverse the timeline.

 

I've given a simplified example below (Codepen example included).  The red box comes in from the top and there is a stagger on the blue boxes that come up from the bottom (going from left to right).  Is it possible to stagger the blue boxes so they still come up from the bottom, but stagger from right to left?

Many thanks

 

var tl = new TimelineMax({repeat: -1});

tl
.from("#box", .8, {y:-60})
.staggerFrom(".box", .8, {y:60}, .15)

 

See the Pen pLpxwj by emilychews (@emilychews) on CodePen.

[Shaun Gorneau]

Absolutely! You'll want to reverse the collection of ".box". With vanilla Javascript you can do the following

 

See the Pen LdeXjv by sgorneau (@sgorneau) on CodePen.

 

 

[OSUblake]

One suggestion though. Array methods like forEach won't work on a NodeList in older browsers like IE. So I would do it like this.

 

var boxes = Array.prototype.slice.call(document.querySelectorAll(".box")).reverse();

 

 

See the Pen vRpQRE by osublake (@osublake) on CodePen.

 

[emilychews]

Hi Shaun,

Thanks for this, it has really confused me though - I thought unshift() was for adding elements to an array ? Although it works, I don't actually understand how?
 

Em

[Shaun Gorneau]

6 minutes ago, OSUblake said:

One suggestion though. Array methods like forEach won't work on a NodeList in older browsers like IE. So I would do it like this.

 

var boxes = Array.prototype.slice.call(document.querySelectorAll(".box")).reverse();

 

Good call about IE

[OSUblake]

10 minutes ago, emilychews said:

Thanks for this, it has really confused me though - I thought unshift() was for adding elements to an array ? Although it works, I don't actually understand how?

 

You're correct. unshift adds an item to the front of an array. First he created the boxes array, and then loops through the node list, adding each node to the boxes array using unshift. Because he's using unshift instead of push, it reverses the order.

[emilychews]

 @OSUblake and @Shaun Gorneau Thanks for both answers (and added explanations).

[GreenSock]

An even easier way to do this is to make the stagger value negative

 

.staggerFrom(".box", .8, {y:60}, -0.15)

 

[Shaun Gorneau]

@GreenSock 

 

why are things so easy?!?!

[PointC]

@Shaun Gorneau - That's known as GreenShock.

 

 

[Shaun Gorneau]

We need a new emoji!

 

 

[PointC]

Haha! Perfection.  

 

Each time it's used a modal pops up and says: "Boom! You've been GreenShocked!" 

 

I think all the emojis should have a cool green tint like that. 

[Shaun Gorneau]

 

Any "Parks & Rec" fans out there? 

 

[GreenSock]

2 hours ago, Shaun Gorneau said:

Any "Parks & Rec" fans out there?

 

Are you kidding? Of course! My whole family is nuts about that show and recently binge-watched all seasons on Netflix

[Shaun Gorneau]

1 minute ago, GreenSock said:

Are you kidding? Of course! My whole family is nuts about that show and recently binge-watched all seasons on Netflix

 

Ha ha!!! Nice!I think I'm on my 5th run through on Netflix! It get's funnier ... every ... single ... time ... I rewatch an episode!