[Change duration for the last two objects using staggerTo]

Thanks for all the suggestions on how to solve this!

I went with Jack's solution. It was exactly what I was looking for 

[Change duration for the last two objects using staggerTo]

Thanks Sahil.

The issue is that all boxes are the same. I just painted the last two green for this demo purpose.
I guess i could add a class to the last two elements with javascript before running the animation. In that case i could use your example. It just seems a little hacky.. But maybe that is the solution to this.

 

Thanks again

 

[Change duration for the last two objects using staggerTo]

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.

See the Pen pVrzzq by faderfrost (@faderfrost) on CodePen

[Question about reverting an animation (again)]

Wow this was very helpful @dipscom! Thank you so much for that explanation.

[Question about reverting an animation (again)]

@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?

[Question about reverting an animation (again)]

Thanks!

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...

[Question about reverting an animation (again)]

Hi devs,

 

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.

Any ideas? 

See the Pen yjMWLy?editors=1111 by grandorf (@grandorf) on CodePen

[Animated profile icon]

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

[Animated profile icon]

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?

[Animated profile icon]

Hi all,

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:

 

1. 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?
    
2. Could one of you please review my code in general? I would love some feedback if I could do something smarter!

 

Thanks!

PS: GSAP is awesome!

See the Pen KRVWWy by faderfrost (@faderfrost) on CodePen