Change duration for the last two objects using staggerTo

[mgb 4 Likes (Newbie)]

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 2,541 Likes (Superhero)]

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 4 Likes (Newbie)]

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 8,599 Likes (Superhero)]

You could always use a loop.

 

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

 

Just a thought. Happy tweening.

 

[GreenSock 8,117 Likes (Superhero)]

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 8,599 Likes (Superhero)]

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 4 Likes (Newbie)]

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 358 Likes (Leader)]

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 2,541 Likes (Superhero)]

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 8,117 Likes (Superhero)]

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 8,599 Likes (Superhero)]

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

[Sahil 2,541 Likes (Superhero)]

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 8,599 Likes (Superhero)]

[OSUblake 9,990 Likes (Superhero)]

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.