Animations failing on initial load

Hello,

I have created an animation on the home page of my site on the first line of text in the hero section. My plan is to add the same animation to all three lines, but I have noticed already that the animation for the first line is not functioning as it should.

The problem is that the initial state is set so that the text is below the boundary of the parent div (so that it isn’t visible), however when I play the animation, the text begins the animation only a few pixels lower than the end position.

I have noticed this issue elsewhere on the site too - on the second a third modals on the portfolio page there is an animation that moves them upwards from below the viewport, however the first time I open them, they have the same issue as the text animation above. Strangely, once they have been opened once, they then open normally if I open them again after that.

Can anyone explain what is going wrong? Thanks


Here is my public share link: https://preview.webflow.com/preview/the-berg-design?utm_medium=preview_link&utm_source=designer&utm_content=the-berg-design&preview=91c9062ddd3222d634b69dca1276b6da&pageId=5fe5f44a305f86b068e4a8b7&mode=preview
(how to access public share link)