Hover animation cancelling Page Load animation

Design help Animations & Interactions
1

Hi,

I am trying to create an animation where some text flies into the screen from different directions on page load, and then moves around my div block depending on the position of the mouse. The page load animation works fine on it’s own however when coupled with my hover animation, the text no longer flies in at the start.

I am assuming this is due to the fact that the elements move properties are both effected by two different things, as the opacity on the page load still works fine.

Is there a work around for this? Also I am new to Webflow and this is quite a big learning curve for me so an explanation in the simplest terms possible would be greatly appreciated.

Here’s a link to my project
https://preview.webflow.com/preview/curtis-halligan-bb90c6?utm_source=curtis-halligan-bb90c6&preview=ac7d99e74578ab7acba375b8f10c2dc5

Thanks!

Curtis

2

Update -
I’ve since managed to include both the Page Load and Hover animations on my site by creating two separate animations for each one and making them visible/not visible respectively and the Page Load finishes.

This looks fine however if the mouse is already in the div block at the time of the page load animation finishing, the text will immediately jump around to the new position instead of smoothly fading across.

This is only a fairly minor issue but it would be nice if anyone has a workaround for this, or a better way for me to put the whole thing together from scratch!

Thanks!