Pageload Interaction element not behaving correctly

On this page https://lawnz.webflow.io/forms there is a black diagonal line that grows from nothing to its full length on the page load interaction. (It’s actually moving into a masking div from outside to give the impression of growing.)

It’s doing pretty much the same thing as seen here (only it’s a smaller version) https://lawnz.webflow.io/
For some reason that I can not work out why the larger version animation doesn’t play smoothly like the second example; it tends to flash into its final state rather than move smoothly.

Can anybody see what the problem is?

here’s the Shared project:
https://preview.webflow.com/preview/lawnz?utm_medium=preview_link&utm_source=designer&utm_content=lawnz&preview=49291d9cddd96ed75f8f5da9828c8176&pageId=61426aab868702375b09922b&workflow=preview

Cheers
Grant

Grant,
If you refresh the page once loaded it works.
This may help you resolve the issue.
If it doesn’t I will help you further.

Hi there. Thanks for looking at it. It seems to be quite erratic. It works ok on some browsers but not on others; which I don’t understand as it is basically doing the same thing as what’s happening on the home page where it works fine all the time. There are some scripts on the Form page for the forms themselves which I thought may have been the issue, but removing them didn’t make a difference.

From memory of previous experience, you are running a timer.
Do this in 1 second. Even though the script isn’t executing the time is.
So when it picks up and says where would I be in x time, it says ive passed these points so complete them.
If that makes sense.
Add a delay to prove it one way or another.


Then we can act accordingly.
I would recommend if possible though to use the execute when page is loaded for better control.

Hey, that sounds interesting, I’ll have a play around and see what I can do. Thanks, will let you know how I get on.

Hi there. I tried your suggestion of making the interactions play after the page has loaded, but it hasn’t really made things better. https://lawnz.webflow.io/forms
It works reliably better on a page refresh but not on the initial page load.

Try removing some of the style options.
Relative and float.
Dont think you need hide in the animation if you are moving a picture out of a box with contents hidden.