Create mobile interaction when elements' top hit screen top

Hello there

I would like to create a mobile interaction in which when an element top border meets the top of the screen when scrolling an image is revealed, and when the element bottom border meets the top of the screen when scrolling some more the image is hidden again.

I tried creating a similar animation using ‘Scroll into view’ (Please see attached), but unfortunately, this triggers the animation when the entire element is in the screen view and not by it’s interaction to the top of the mobile screen view, as I would like.

Really hoping you can help me with this!

Idan1212

Here is my public share link:
https://preview.webflow.com/preview/anisias-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=anisias-portfolio&preview=696bbff3853b323ffad055e006801573&mode=preview

https://anisias-portfolio.webflow.io/