Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emilychews

Reverse a Stagger Direction (not reverse Timeline)

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

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

Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

 

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

 

  • Like 9
Link to comment
Share on other sites

Haha! Perfection. :lol: 

 

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. ;)

  • Haha 2
Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

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! 

 

 

  • Haha 2
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.
×