Gsap 3 Timeline variable

[fernandocomet]

I want to change color of my background and text again and again parsing my array of colors. 

 

I don´t know if I can do that using a variable or changing itemColor value, I was thinking in using an onComplete funcion by I will use this inside React, 

let itemColor = 0;

var tl = gsap.timeline();
tl.to("#bg", {
  backgroundColor: colors[itemColor].dark,
  duration: 1,
  delay: 3
}).to("#h1go", {
  color: colors[itemColor].light,
  duration: 1,
  delay: 0
});

Also I have a Codesandbox link for React https://codesandbox.io/s/gsap-react-text-gsaptimeline-cuk58?file=/src/App.js

Thanks in advance

See the Pen gOaebxY by fernandocomet (@fernandocomet) on CodePen

[ZachSaucier]

Hey Fernando. I'm not understanding: What's the end goal here? What you have is working... How do you want it to be different?

[fernandocomet]

Thank you Zach

 

I want to change color of background of text every constantly, asigning the colors of my Array (dark/light)

I wonder if it can be made with gsap timeline or if there´s a better option

[ZachSaucier]

Just now, fernandocomet said:

I want to change color of background of text every constantly, asigning the colors of my Array (dark/light)

So you want the animation above to repeat but with a different value each time? 

[fernandocomet]

Yes that´s right

[ZachSaucier]

There are a lot of ways you can do that. It depends on exactly how you want it to happen. 

 

One simple way is to loop through all of the color entries:

var tl = gsap.timeline({repeat: -1});

colors.forEach(color => {
  tl.to("#bg", {
    backgroundColor: color.dark,
    duration: 1,
    delay: 3
  }).to("#h1go", {
    color: color.light,
    duration: 1,
    delay: 0
  });
});

 

Another way would be to make use of repeatRefresh. Make sure to have functional values if you're using this approach:

var tl = gsap.timeline({
  repeat: -1, 
  repeatRefresh: true,
  onRepeat: () =>
    itemColor = gsap.utils.wrap(0, colors.length - 1, ++itemColor)
});

tl.to("#bg", {
  backgroundColor: () => colors[itemColor].dark,
  duration: 1,
  delay: 3
}).to("#h1go", {
  color: () => colors[itemColor].light,
  duration: 1,
  delay: 0,
});