Scroll into view animation occurring before element is in view

I have a progress circle animation on page load and an element interaction when ‘welcome-screen-content’ scrolls into view.

When the page loads the initial state of the ‘progress-animation’ interaction hides all other elements on the page so the user can’t scroll while the progress animation is shown. At the end of the ‘progress-animation’ the rest of the elements are unhidden.

However my welcome-screen-content div begins the animation when the page loads and not when the element is in view. Or maybe the element is in view and I can’t figure out how since the elements are hidden.

Any help on this would be greatly appreciated. Thanks everyone!

Here is a read only link to the site Webflow - Green Fish Sushi

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