Scroll linked animations glitching

Question:
I have a move animation on several pngs on my homepage that are glitching when you load the page (you see their final position first before they glitch and show the proper animation). Is there a way to fix this?

Product:
Wix Studio

What are you trying to achieve:
I do not want to see the final position of the pngs when you first load the page as it ruins the surprise of the animation.

What have you already tried:
Not sure how to trouble shoot.

Site: https://info4563861.wixstudio.io/bioticartlab2

Hey there,

Firstly - great site! Love the neat design and interactions.

Well I couldn’t see others, but yes I do see the glitch on the hero section itself, where the pngs appear for a split second before disappearing.

I can suggest a couple of ways of fixing this:

1. Use a site preloader (Requires code):

Build a preloader for your site using this tutorial by @jtsodik:

2. Invert your animation (No-code):

Instead of using the Move In to end position animations that you have used, try using Move Out of the initial position, where the pngs will be located in their start position by default when the page loads, not their end position, and will gradually slide to their end positions as the user slowly scrolls down.