Change duration for the last two objects using staggerTo

[mgb]

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.

[Sahil]

Not possible out of box.

 

But you can chain your tweens in timeline and adjust the position parameter to get desired effect for last elements.

 

See the Pen vjJYrM?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

There is also option of cycle if you are trying to do something crazy but it will only let you change delay instead of duration, though probably not what you are looking for.

 

https://greensock.com/cycle

 

See the Pen bMrGmp?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

[mgb]

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

 

[PointC]

You could always use a loop.

 

See the Pen LmjYKq by PointC (@PointC) on CodePen.

 

Just a thought. Happy tweening.

 

[GreenSock]

Yep, all these solutions are good. Here's one more: 

 

var tl = new TimelineLite();
tl.staggerTo(".box", .6, {x:100, opacity: 1, ease: Back.easeOut}, 0.2);
var children = tl.getChildren();
children.pop().duration(1.8); //last
children.pop().duration(1.8); //2nd to last

 

This is fun.

 

[PointC]

Uh-oh! 

 

If Jack is playing then @Sahil and I get to be on the same team. We should probably grab the rest of the mods for our team too. 

[mgb]

Thanks for all the suggestions on how to solve this!

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

[Acccent]

Isn't it potentially risky to pop the last element of the children array? What if it's needed later?

// Maybe this
children[children.length - 1].duration(1.8);
children[children.length - 2].duration(1.8);

// or
children.slice(-2).forEach(t => { t.duration(1.8); });

 

[Sahil]

Quote

If Jack is playing then @Sahil and I get to be on the same team. We should probably grab the rest of the mods for our team too. 

 

I thought I had winning move but @Acccent already pointed out same thing I was concerned about.

[GreenSock]

5 hours ago, Acccent said:

Isn't it potentially risky to pop the last element of the children array? What if it's needed later?

 

It would be if that array was something GSAP taps into internally, but it's not. When you call getChildren(), it creates a new array, populates it, and spits it back to you. So you can do whatever you want with that array. In our example, we really only needed the last 2 elements anyway. 

[PointC]

See... this is why it's Jack against the whole mod team. (and we'll still probably lose)  

[Sahil]

Quote

See... this is why it's Jack against the whole mod team. (and we'll still probably lose)  

 

@OSUblake Would be on our team. Let's have a code off between Blake and Jack. I will some popcorns.

[PointC]

[OSUblake]

On 5/4/2018 at 12:53 PM, Sahil said:

 

@OSUblake Would be on our team. Let's have a code off between Blake and Jack. I will some popcorns.

 

Hehe. I could never beat Jack at his own game.