Gradually hide text from left to right on the background image

[DuncN]

Hello, I've been using gsap for some time now, it's really cool & powerfull tool!

 

I'm looking for a solution as I'm a bit stuck. I'd like to hide the text using a div (or anything else). I don't have a desired effect example, though if you look at my code sandbox you'll see how I'd like to have it done.

 

https://codesandbox.io/s/shy-thunder-mmeq13?file=/src/App.js

 

With a current behaviour, the invisible div is sliding over the text and covers it completely. However, it does not make the text to disappear.

 

PS. I've looked at other gsap topics and unfortunately wasn't able to find an answer to that. Also I'm sorry, not used to codepen, so I've added codesandbox instead.

See the Pen App.js by s (@s) on CodePen

[PointC]

Hi @DuncN 

 

Welcome to the forum. Just my two cents, but I'd probably use a clip-path for that.

 

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

 

Happy tweening.

 

[DuncN]

hey PointC,

 

That's very helpfu, thank you for that! Exactly what I was looking for!