Change Text Color when overlapping with floating elements

[Shashank Naithani]

I am beginner just learning gasp. However I am not sure what to do if a orange circle is below the grey text, the text should change to white or any other color.
is it possible with gasp. Please help.

[GreenSock]

Welcome to the forums, @Shashank Naithani. That isn't anything related to GSAP really - that's more of a question about masking. It's hard to say because you didn't provide a minimal demo in CodePen or anything, so I'm not sure if your project is built in SVG or standard HTML, but you might want to look into clipping paths or masks in SVG. We really try to keep these forums focused on GSAP-specific questions. Good luck, and feel free to post again with anything GSAP-related. 

 

Cheers!

[Shashank Naithani]

Thanks for replying.
yes I looked some css solution but they are not effective.
I did scroll movement on svg circle and move they move below the text, I want to make the text white with gasp.
As CSS blend-mode is not working for me perfectly.
I am totally focused on getting something in gasp which is dynamic and smooth.

[PointC]

This is an answer demo from another thread, but maybe it will give you some ideas. It's a SVG with clip-path reveal of the white text.

 

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

 

Happy tweening.

 

[Shashank Naithani]

@PointC thankyou Sir. You Made my Day.😀