Reveal on scroll (excluding elements already visible in viewport)

I’m building a photo gallery and thought I would apply a animation similiar to the one illustrated here: Reveal elements on scroll — Webflow interactions and animations tutorial - YouTube

Works well, but in my case the gallery section and part of it’s content is already displayed in the viewport. Which means when the page loads the interaction triggers on the elements that are already visible to the user and it looks kind of odd. Is there a way to trigger the animation only on elements that are not yet visible in the viewport? Ps. I’m working with a collection list for the gallery items… otherwise I guess I could put the interaction to trigger on the 3rd row in the grid or something like that. But not sure how to proceed with a collection list?

Here is my public share link: LINK
(how to access public share link)