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.

Share this post


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

Share this post


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

Share this post


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

Share this post


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 :) 

Share this post


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). 

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×