The issue is that all boxes are the same. I just painted the last two green for this demo purpose.
Is it possible to change the duration in a smart way on the last two elements in a timeline using staggerTo ?
I want the last two green elements to go in a little bit slower than the purple ones. There could be 20 purple elements so I don't know the number of objects but I would like the last two to always go slower.
@PointC Thanks maybe I didn't knew how reverse() worked after all
But changing tl.reverse() to tl.reverse(0) in my example still doesn't make it work.
Should i use reversed() or something else if I wanted my example to work?
It works when the timeline is constructed outside the function as you suggested. However, why wouldn't it work? I can see it's bad practice to create the timeline again and again, but I don't see why it should not work...
I am pretty sure how reverse() works but i can't get it to work in this context (see codepen).
I need to construct the animation in another file and import it to another file and run it. I should be able to control if I want it to go forward or reverse from the init file so I have added "playReversed" as a parameter and want to control the animation by adding true or false.
This basic codepen should give you the idea. If you look in the console you can see the statements is correct. But the animation won't work.
Thanks Craig! This works!
However I have to bonus questions for you
Is it possible to change the duration on that last tween when going reverse? It would look better if it went slower. Also, The last frame does not match the starting point. The circle is a few pixel higher then the expected result. I can see why it does this but I'm not sure how to fix it besides making two timelines.
With all these small changes to the animation when it goes backwards would it then be better practice to create two timelines instead? I like the DRY concept but I don't like to make things to complex either
Thank you @PointC this was what I needed. Looking at your codepen I can now see that the last tween (which is the first in the timeline) stops very suddenly. Is there a way to override the first tween and change the ease to Power4.easeOut or something similar to make it more smooth when played reversed?
So I have taken over an animation task at work and I have now built this icon with gsap: https://imgur.com/a/2vhi8
And I have two questions:
The designer at my work don't want it to go reverse 1:1. If you look at my comment "First Part" in codepen that should not run when the animation goes reverse. (The idea is that the first bounce only makes sense one way). So how would you solve this? I could probably fix this by duplicating the entire timeline and make the changes but that would be repeating code. So how would I fix this fix this the most elegant way?
Could one of you please review my code in general? I would love some feedback if I could do something smarter!
PS: GSAP is awesome!