Looping through color array with SplitText.chars

[ddi-web-team]

Hi all

 

I decided to have some fun with the codepen challenge and utilize my favorite library 😁

 

One thing I decided to do was create an array of colors that I could loop through and set the color of each character in the caption of the photo. I got this working properly using the following:

 

  const captions = gsap.utils.toArray('figure > figcaption');
  const colors = ['#ffadad', '#ffd6a5', '#fdffb6', '#caffbf', '#9bf6ff', '#a0c4ff', '#ffc6ff']
  captions.forEach(caption => {
    mySplit = new SplitText(caption);
    let counter = 0;
    for(const char in mySplit.chars){
      if(counter > 6){
        counter = 0;
      }
      gsap.set(mySplit.chars[char], {'color': colors[counter]});
      counter++;
    }
  });

My only question is this. Is there a more elegant way? I've read through the gsap utilities and I'm failing to come up with a way to do this in a more concise way. Thank you!

See the Pen abEQoWz?editors=1111 by DDI-Web-Team (@DDI-Web-Team) on CodePen

[PointC]

You could so something like this:

 

for (const char in mySplit.chars) {
   gsap.set(mySplit.chars[char], { color: colors[char % colors.length] });
}

Makes it a little more concise. Not that there is anything wrong with what you did.

 

Happy tweening.

 

[mvaneijgen]

I really like the  `gsap.utils.wrap()` function for these kind of tasks. I've given it your array of colors and it will just loop through them each time and wraps to the beging when there are no more items ins the array.

 

So the code can be written something like this 

 

  const captions = gsap.utils.toArray("figure > figcaption");
  const colors = gsap.utils.wrap(["#ffadad", "#ffd6a5","#fdffb6","#caffbf","#9bf6ff","#a0c4ff","#ffc6ff"]);
  
  captions.forEach((caption) => {
    mySplit = new SplitText(caption);
    gsap.set(mySplit.chars, { color: colors });
  });

 

See the Pen dyJQoRp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Good luck with the challenge!

[ddi-web-team]

24 minutes ago, mvaneijgen said:

I really like the  `gsap.utils.wrap()` function for these kind of tasks. I've given it your array of colors and it will just loop through them each time and wraps to the beging when there are no more items ins the array.

 

So the code can be written something like this 

 

  const captions = gsap.utils.toArray("figure > figcaption");
  const colors = gsap.utils.wrap(["#ffadad", "#ffd6a5","#fdffb6","#caffbf","#9bf6ff","#a0c4ff","#ffc6ff"]);
  
  captions.forEach((caption) => {
    mySplit = new SplitText(caption);
    gsap.set(mySplit.chars, { color: colors });
  });

 

 

 

 

Good luck with the challenge!

 

While I do really like the @PointC solution (and your website. Thank you so much for the content) I feel like .wrap() was made for this! Thank you so much! 🙂

[PointC]

Of course wrap() was made for this. (and is the better answer) You should always choose the GSAP solution whenever possible. 

 

[GreenSock]

Ha. Both are elegant! I love when we have multiple approaches offered. That's what makes these forums so valuable. 👏