Change order with Gsap Flip

[momo12]

Guys I have a question. GSAP Flip will start Append.child from the first element it finds. Is there a way it does the same thing but the for the last item? 

 

I mean if it's liks img[0] --> img[1] --> ... --> img[9]

It starts like this img[9] --> img[8] --> ... --> img[0]

[GreenSock]

I read your question a few times and I’m still pretty confused. Are you trying to do a stagger, but have the order reversed? If so, just use a negative value. 

 

Please get in the habit of providing a minimal demo so we have some context. You’ll exponentially increase your chances of getting a good answer when you provide a simple CodePen, for example. 

[Rodrigo]

Hi,

 

I assume that this is related to this thread:

You should have a look at all the options advanced staggers offers. All you have to do is pass a configuration object to the stagger property and pass the value for the duration of each stagger and from which index you want the animation to begin. Something like this:

Flip.from(state, {
  absolute: true,
  duration: 0.5,
  stagger: {
    each: 0.1, // Stagger time between each animation
    from: "end", // Which element will be the first to animate
  },
  ease: "power1.inOut",
  onComplete() {
    isGrid = !isGrid;
  }
});

Here you can check the Advanced Staggers docs:

https://greensock.com/docs/v3/Staggers

 

Let us know if you have other questions.

 

Happy Tweening!

[momo12]

32 minutes ago, Rodrigo said:

Hi,

 

I assume that this is related to this thread:

You should have a look at all the options advanced staggers offers. All you have to do is pass a configuration object to the stagger property and pass the value for the duration of each stagger and from which index you want the animation to begin. Something like this:

Flip.from(state, {
  absolute: true,
  duration: 0.5,
  stagger: {
    each: 0.1, // Stagger time between each animation
    from: "end", // Which element will be the first to animate
  },
  ease: "power1.inOut",
  onComplete() {
    isGrid = !isGrid;
  }
});

Here you can check the Advanced Staggers docs:

https://greensock.com/docs/v3/Staggers

 

Let us know if you have other questions.

 

Happy Tweening!

Thank you! I was looking to animate elements from bottom to top. @GreenSock did the best thing! 

Thank you guys! You really help the community to learn

[momo12]

1 hour ago, GreenSock said:

I read your question a few times and I’m still pretty confused. Are you trying to do a stagger, but have the order reversed? If so, just use a negative value. 

 

Please get in the habit of providing a minimal demo so we have some context. You’ll exponentially increase your chances of getting a good answer when you provide a simple CodePen, for example. 

Thank you so much!!