Jump to content
Search Community

Reverse a Stagger Direction (not reverse Timeline)

emilychews test
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

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

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

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.
×
×
  • Create New...