Staggering elements depending on their data attribute

[classikd 21 Likes (Newbie)]

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

[ZachSaucier 6,058 Likes (Superhero)]

Hey classikd,

 

You can do that using the second parameter, which is the target:

See the Pen qBEZqXM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I highly recommend GSAP 3 though! In GSAP 3 it'd be:

See the Pen YzPqprg?editors=0010 by GreenSock (@GreenSock) on CodePen

[classikd 21 Likes (Newbie)]

Thank you Zach. I though the arguments didn't exist because i have tested the first, and its value were always 0.

Is that normal ?

See the Pen dyPMNPb by classikd (@classikd) on CodePen

 

Not the case with gsap 3 apparently

[GreenSock 12,378 Likes (Superhero)]

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.

[classikd 21 Likes (Newbie)]

Oh ok I understand now, thanks a lot for your help !

I think I am going to try GSAP version 3 ??

 

[GreenSock 12,378 Likes (Superhero)]

4 minutes ago, classikd said:

I think I am going to try GSAP version 3 ??

 

Buckle your seatbelt. You're in for a fun ride. I think you'll like it.