Jump to content
Search Community

Change duration for the last two objects using staggerTo

mgb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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

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

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.
×
×
  • Create New...