Load animation elements not working properly on smaller screen sizes when switched to “when page starts loading”

Hi everyone!

I encountered issues with one of the page load animations, specifically on the Inquire page. I’d love your expertise to help me out with this!

Issue: When I tried to implement a simple page transition, involving the horizontal line’s width size growing from 0% to 100%, it worked flawlessly under the “when page finishes loading” setting. However, upon switching it to “when page starts loading,” the horizontal line just froze and refused to animate as intended.

Interestingly, this issue only affects screen sizes smaller than tablets; desktop designs remain unaffected.

Troubleshooting: After going through similar issues on the forums, I stumbled upon a potential reason: conflicts between scroll animation and load animation, both targeting the same element.

Attempted Fix: I tried targeting a different element on the scroll animation (I believe it should be the “scroll into view” animation on the page-wrapper div block) to eliminate any overlap. However, the frozen horizontal line persists despite my efforts :smiling_face_with_tear:

I’m very confused and would appreciate any guidance or insights you could offer to help resolve this issue!

Here’s the preview link for your reference: my read-only link

and here’s also a screen recording of the issue

Thank you all so much for your time and assistance! :pray: