Staggering elements with dynamic vars

[4bidden450]

I have a container that has multiple elements wrapped in spans with a data attribute specifying the color in which it should fade to. I'd like to transition the color over 2 seconds, with a 0.5 seconds stagger between the elements. I may have 1 or I may have 100 elements to do.

 

I've been banging my head against the desk for a while and I feel like I'm missing something simple. The issue arises with trying to use the individually specified color for each element. If I just had the array of elements all going to the same color I've figured that out. But I can't get it where each color is a variable.

 

Each span is defined like: <span class="fadetext" data-fadeto="#ED8B00">

 

I've been through many iterations, but here is the most recent that does not work.

 

var tl = new TimelineLite();

nextSection.find('.fadetext').each(function(index) {
    tl.staggerTo($(this), 2, {color: $(this).data('fadeto')}, 0.5);
});

[Carl]

Hi and welcome to the GreenSock forums,

 

That's an interesting challenge.

Using the cycle property inside a stagger method should do the trick.

 

 

 

so in your case I think you can do:

var tl = new TimelineMax()

tl.staggerTo(".fadetext", 1, {
  cycle:{
    color:function(){
      console.log(this.dataset.fadeto);
      return this.dataset.fadeto;
    }
  }
}, 0.5)

 

See the Pen yjbgpp?editors=1010 by GreenSock (@GreenSock) on CodePen

 

you can read more about cycle and staggers in the docs: https://greensock.com/docs/TimelineMax/staggerTo()

 

In the future, please consider providing a CodePen demo as it saves us some time and helps us see exactly what you are having trouble with.

 

thanks!

[4bidden450]

Thank you Carl. Cycle seems to be the answer, but I'm still having an issue.

 

this.dataset is undefined in my code. Here is a pen that closely matches my code. The awesome (not!) part is that this.dataset works fine here. 

 

Why this.dataset is undefined in my code is obviously outside the scope of your support, but any high level things I should check?

 

 

See the Pen wjdJXX by anon (@anon) on CodePen