Page Transition on published site looks different than the preview

I am trying to build a Page transition with a div-mask which covers the whole page.
I have followed the following tutorial and seen multiple videos.

The preview in the Designer looks correct. However the published site does not show the first part of my page-load animation (the part where the masks moves out of the frame). What is wierd is that the second half of the animation still plays. I made sure that the display is set to block.
Has anyone encountered this issue before or knows any tips why the animation in the preview differs from the published site?