Jump to content

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

Staggering elements depending on their data attribute

Recommended Posts


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

  <li data-percent="50">1</li>
  <li data-percent="75">2</li>
  <li data-percent="15">3</li>
let tl = new TimelineMax()
  .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 post
Share on other sites

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

Link to post
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 post
Share on other sites

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

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


  • Like 2
Link to post
Share on other sites
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. 

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