Jump to content
GreenSock

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

GSAP 3 Stagger Classnames

Recommended Posts

Is there any way we can add classes to the elements of each iteration of stagger?

 

onRepeat callback does not provide the current iteration 's target as far as I can see.

Link to post
Share on other sites

You can put callbacks inside the stagger object.

 

 

gsap.to(elements, {
  x: 100,
  repeat: -1,
  stagger: {
    each: 0.1,
    onComplete() {
      console.log(this.targets()[0]); // <= the current target
    }
  }
})

 

  • Like 5
Link to post
Share on other sites
2 minutes ago, OSUblake said:

You can put callbacks inside the stagger object.

 

 


gsap.to(elements, {
  x: 100,
  repeat: -1,
  stagger: {
    each: 0.1,
    onComplete() {
      console.log(this.targets()[0]); // <= the current target
    }
  }
})

 

 

Oh wow! This is super useful! I don't think this is on documentation.

 

Thank you @OSUblake

Link to post
Share on other sites
1 minute ago, anteksiler said:

Oh wow! This is super useful! I don't think this is on documentation.

 

There's a new documentation page for staggers. Check out the Repeat / Yoyo / Callbacks section.

https://greensock.com/docs/v3/Staggers

 

 

  • Like 2
Link to post
Share on other sites
38 minutes ago, anteksiler said:

I don't think this is on documentation.

35 minutes ago, OSUblake said:

There's a new documentation page for staggers. Check out the Repeat / Yoyo / Callbacks section.

https://greensock.com/docs/v3/Staggers

It's also explained in the video on the staggers documentation page :) 

Link to post
Share on other sites

It is in those two places but I'm also curious if you thought it belonged elsewhere in the docs, @anteksiler. Like...where were you expecting it? It's always a balancing act for us between having concise (but "detailed enough") docs and having overwhelmingly detailed docs (where the volume of content can actually become an impediment). 

Link to post
Share on other sites
20 minutes ago, anteksiler said:

it would be great if "stagger" information under parameters inside https://greensock.com/docs/v3/GSAP/gsap.to() have a link to https://greensock.com/docs/v3/Staggers

Good suggestion! Thanks. I added a link in the relevant pages to the staggers docs. 

 

21 minutes ago, anteksiler said:

And, https://greensock.com/docs/v3/Staggers can have row for callbacks here:

That's a little more complex. There are actually a lot of special properties that are available for use inside of the stagger object (almost as many as on tweens themselves). Instead of muddying the docs for the stagger object with values that aren't helpful in 99% of cases, I added a note before the listing. I also added a note after the property listing specifically mentioning callbacks and repeat since they're the most common special property inside of the stagger object.

  • Like 1
Link to post
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.

×