How to achieve this text color replace animation.

[JPM82]

If you look at the example in the codepen, what I want to happen is the white text will turn black as the background moves to the right.  I want this to be a seamless transition.  I've seen this in other examples using svgs and masks, but I'm at a total loss as to how to achieve this.  I'd prefer to not use SVG's if possible, only because this is going to be the hero section of a page, and I'd like the content to be changed at anytime but still keep the effect in tact.  Is this possible?  Any help or assistance would be wonderful. Thank you! 

See the Pen qBVMmyE by Gemini7401 (@Gemini7401) on CodePen

[Anurella]

You can try using the css property mix blend mode for the text but you cannot apply transitions on it, but the hero section would need a background color of white, removing the z-index on the hero:before element would help. see below

 

See the Pen ZEaMVxy by Anurella (@Anurella) on CodePen

 

I think SVG masks would be great, you can use text in SVG. check out @PointC tutorial https://www.motiontricks.com/invert-svg-text-with-a-mask/

 

[JPM82]

@AnurellaThis would work perfectly, but it doesn't seem like the mix-blend-mode properties can be adjusted to a certain color.  The 'black' in the real project is a dark grey.  

[PointC]

I'd use SVG text and a mask, but you can accomplish the same thing by cloning the element and using a couple of clip-paths. Text color and background-color won't matter by using this approach. 

 

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

 

Hopefully this helps a bit. Happy tweening.