momo12 Posted October 19, 2022 Share Posted October 19, 2022 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] Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 19, 2022 Solution Share Posted October 19, 2022 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted October 19, 2022 Share Posted October 19, 2022 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! 1 Link to comment Share on other sites More sharing options...
momo12 Posted October 19, 2022 Author Share Posted October 19, 2022 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 Link to comment Share on other sites More sharing options...
momo12 Posted October 19, 2022 Author Share Posted October 19, 2022 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!! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now