Jump to content
Search Community

Staggering elements depending on their data attribute

classikd test
Moderator Tag

Recommended Posts

Hello,

I am trying to scale list elements depending on their data-attribute, here is what i have :
 

<ul>
  <li data-percent="50">1</li>
  <li data-percent="75">2</li>
  <li data-percent="15">3</li>
</ul>
let tl = new TimelineMax()
tl
  .staggerFromTo('[data-percent]', 0.25, { scaleX: 0 }, { scaleX: function(){
    // i would like to return a dynamic value
    return 0.5
  }}, 0.1);

Is there a way to get the data attribute of the current element ?

I can't find a solution.

 

Thank you

Link to comment
Share on other sites

Yes, that's normal for GSAP v2 and earlier because the stagger methods create ONE tween for EACH element in the array, so of course the index will always be 0 (that function gets called by each tween instance...and each tween only has ONE target). 

 

It's more intuitive in GSAP v3 since any tween can have a stagger. 

 

In v2, you'd need to use the "cycle" special property to get that behavior. If you need help with that, just let us know.

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