Really tall SVG (as scrolling background) is glitching my site

Hi! I’m working on a website where most elements will be animated to move downwards to create an inverse scroll effect, so that as you scroll down it seems like the page is moving up. And I’m adding a background that makes it look like the “camera” is being raised out of a really deep cave-like place.

For this background, I’m using an SVG, created in Illustrator, that is 6740 px in height, and I’m animating it (While Page is Scrolling) with a Scroll Animation, using a Move action (from 0 px to 6740 px on the Y axis).

For some reason, the rendered background only quivers and moves downwards slightly when I apply this animation, and definitely not the whole length of the SVG. Someone PLEASE HELP.

So that the page scrolls, I made the body 6740 px in height, because most other elements have an absolute position, just like the SVG. I’m new so I don’t know if this is crazy.


Here is my public share link: Webflow - Osiris Capital