Change text color using mask

[aniketbamotra]

Hello everyone, I'm facing problem in creating this effect in horizontal scroll. 

See the Pen MKqBjX by eighthday (@eighthday) on CodePen.

  I want to create this same effect for my page reveal but I want my sections to scroll horizontally and then my whole website will be vertical. I tried by changing the "top" with "left" in js but it didn't work as expected. The problem might be in my approach with horizontal scroll as xPercent is transforming whole section and I can't fix the position of start logo.

 

This is what I did.

 

 

 

PS. I'm new to web development and this is my first time using gsap so help me with this.

 

Thanks in advance 

 

See the Pen wvJrNjr by aniketbamotra (@aniketbamotra) on CodePen.

[OSUblake]

Welcome to the forums @aniketbamotra

 

Have you tried using a mask, either with CSS or SVG like shown here.

https://www.motiontricks.com/invert-svg-text-with-a-mask/

 

[aniketbamotra]

No I haven't, I'll try this now

 

Thank You for the idea