Jump to content
GreenSock

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

Reverse a Stagger Direction (not reverse Timeline)

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×