Start animation to hide text/elements at exact scroll position

I’m trying to start animations on the hero text and other elements (navbar, etc.) here. Trouble is, I can’t seem to find a solution to make it start at an exact position of the screen vertically. I’ve tried many variations of the ‘animation boundaries’ and the % definitions in the animation itself, but the trouble is that at different screen sizes it performs much differently, and if the screen is too tall the animation has already started when the user enters, the navbar doesn’t disappear at the right time, etc.

I’m sure I’m missing a few things, but all the tutorials have to do with revealing things when they come into view, whereas I want to hide things that are already in view. What am I missing here?

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