[How to achieve this text color replace animation.]

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/

 

[How do grow circle and invert color on scroll effect]

tweaking @Carl 's lesson,

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

is an attempt at this.

[Help with simulating a wavy effect]

Thank you @OSUblake
I have edited it but the wave is not smooth without the repeat and yoyo and i do not want it to repeat.

[Help with simulating a wavy effect]

Please I am trying to simulate the effect as seen in this video, any help with direction is welcome. I have tried to skew and rotate, it seems not to work.

 

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