Jump to content
GreenSock

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

Gsap 3 Timeline variable

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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,
});

 

  • Like 2
  • Thanks 1
Link to comment
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.
×