Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mgb

Change duration for the last two objects using staggerTo

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

You could always use a loop.

 

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

 

Just a thought. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

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.

 

:)

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Uh-oh! :wacko:

 

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

  • Like 2
  • Haha 3
Link to comment
Share on other sites

Thanks for all the suggestions on how to solve this!

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

  • Like 1
Link to comment
Share on other sites

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); });

 

  • Like 2
Link to comment
Share on other sites

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

 

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

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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

  • Haha 1
Link to comment
Share on other sites

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.

  • Haha 2
Link to comment
Share on other sites

giphy.gif

  • Haha 3
Link to comment
Share on other sites

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.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×