Multiple Scroll into View Elements - Inconsistency Issues

! UPDATE: Problem Solved. I removed the offsets and spaced the three elements away from each other and I fixed it! Not sure why but I’m assuming it interferes when it’s too close to another similar animation

I have three Scroll Into View Animations that run back to back on my website. When scrolled through at a certain speed, everything works fine, but when scrolled through quickly or slowly, elements either fail to show, or fail to disappear and overlap.

I figure it may be because the animations are so close to one another, but I couldn’t think of a workaround.

Any help would be much appreciated.


Here is my public share link: LINK
Live Site

(The project is quite messy and I don’t name all my elements too well so sorry in advance!)