Jump to content
GreenSock

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

staggerTo stagger incremental increase

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

Hi,

 

Is it possible using staggerTo to change the stagger value for each iteration so that it increases/decreases.

 

So for example the stagger value would decrease .1 for each element

 

Something like:

 

.staggerTo('element', 1, {autoAlpha: 1},  x -= .1  );

 

Many thanks,

Link to comment
Share on other sites

Hi Longstoryshort,

 

Welcome to the forums!

 

Yes, you should be able to achive that by using a function in your stagger with the BRAND-SPANKING-NEW Advanced Staggers™️ see this post with details and here is a page of the docs with relevant details as well.

 

Something along the lines of the bellow should do the trick:

 

.staggerTo(element, 1, {autoAlpha:1}, function(index, target, list) {
  return 0.1 * index;
}

 

  • Like 3
Link to comment
Share on other sites

Yep, and remember that you can define an ease for the staggers, so if you want them to start out small and get larger, you could simply use a Power2.easeIn, for example. 

.staggerTo(".class", 1, {
  autoAlpha:1, 
  stagger: {
    amount:3, 
    ease:Power2.easeIn
  }
});

 

Happy tweening!

  • Like 2
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.

×