Inexplicable Page Scroll Error

Hi all!

I have created an animation as the page scrolls for the shapes under the hero section in the div ‘hero_bg-shapes-w’. When I preview the scrolling animation while adjusting it, everything works fine. But when I preview in the designer or on the live page, the shapes hop to weird positions. I cannot seem to find the solution to this anywhere.

Can anybody help me please? Thank you!

Here is my public share link: [LINK](Webflow - Nature Leaf Organics)
(how to access public share link)