Staggered letters with font color change

[CappMarvell]

Hi,

 

I'm trying to set a color in a staggered sequence.

 

I want a sequence in which the letters "scale" up and down, one-by-one. As each letter is at it's largest size, the color changes. So, though after scaling up, the letter size returns to it's original font size, the color doesn't .

 

In my demo, it starts with color purple, and end with color orange.

 

Here's my CodePen, to show what I'm trying to do:

 

 

This works fine. 

 

I'm wondering if there's a way to simplify my code, instead of having two staggers, and having to figure out the overlap.

 

Thanks.

Stephen

See the Pen RwmQvJX by CappMarvell (@CappMarvell) on CodePen.

Edited June 19, 2024 by CappMarvell
Additional details

[GreenSock]

There are many, many ways to accomplish that. I was curious what you were trying to do with that "-=0.6" value because this is NOT valid: 

gsap.to(".letter", {
    color: "#D14905",
    stagger: {
      each: 0.15
    }
  },
  "-=0.6" // <-- NOT VALID! 
);

That looks like you're trying to use the position parameter, as if the .to() was being called on a timeline. But in your demo, that's just a normal tween (so there's no such thing as a position parameter there). You're trying to do this, right?: 

See the Pen dyEdryx?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Here's another option with a timeline: 

See the Pen PovQLPG?editors=0110 by GreenSock (@GreenSock) on CodePen.

 

I hope that helps.

[CappMarvell]

HI,

 

The second option is what I was looking for. 

 

I had tried something similar to the second option, but I was using "fromTo." instead of "to.", and it wasn't working.

 

Thanks for your help.