Animate text color according to moving background (container) animation

[zlogicalape]

I'm using ScrollTrigger along with 2 animations:
1- A text color change

2- A background (just a container) moving from right to left.

I'm trying to make it seem like whenever the background reaches the text, the text's color starts to change along with the movement of the background.

I've seen an example of this that layers two containers with the same text each (in the same fixed position).
I didn't like this approach much and wanted to try one with the same text that has an animation on it, as show in the Codepen example.

I am unable to make one animation dependent on the other so that they move together and eventually just brute forced the different values for the duration & offset to make it work a bit (but doesn't on different screens)

Is there a way to make one move with the other or maybe even independent from the duration ?!

See the Pen ZErvYVd by zlogicalape (@zlogicalape) on CodePen

[Cassie]

Heya!

 

Looks like you're trying to do masking. Maybe this link will help.
 

 

[PointC]

If you don't want to use two elements, it sounds like a good use case for CSS variables.

 

See the Pen ZErvbPR by PointC (@PointC) on CodePen

 

Happy tweening.

 

 

[zlogicalape]

Hi Cassie,

Thx for the reply, but I was mainly wondering if this is possible the way I'm going at it.
I guess syncing both animations might be quite cumbersome.
Thanks again

Cheers

[zlogicalape]

3 hours ago, PointC said:

If you don't want to use two elements, it sounds like a good use case for CSS variables.

 

 

 

 

Happy tweening.

 

 

I believe this is exactly what I'm looking for.
Don't know much about CSS variables but I'm looking into them now.
Thanks a lot, this looks perfect <3

Cheers