While page is scrolling animation starts from end

[MMH]

Hi, I am trying to create a simple button animation that triggers at a certain % of the page scrolled:

The buttons should start off with 0% opacity and pushed down on the Y axis, then slide up and reveal as the page is scrolled down, and vice-versa.

I’ve set up the animation in the page triggers, but the buttons don’t start off as they should when I preview or publish, but instead, when the page loads, they briefly appear at 100% opacity, then fall down and disappear, as if the animation starts from the end.

I’m new to Webflow, but from what I can tell, there is no “initial state” to be set when creating this type of animation, so I am baffled as to why the animation seems to start at the end, instead of where it’s supposed to.

Any help or advice is greatly appreciated!
Thanks in advance!

---

Here is a read-only link that shows exactly my issue: LINK

EDIT: I ended up going around the issue by adding an animation with the initial state of 0% opacity upon page load finish, just so the drop wouldn’t be visible, but I’d still appreciate any advice or pointer, in case I’m going about doing this the wrong way, or an explanation as to why this happens. Thanks!

[zafremedia]

hello
I checked your site but I don’t understand your problem exactly
But I think instead of using “while scrolling in page”
Use “scroll into view”, maybe it will solve your problem
Meanwhile, to use “scroll into view” for this animation, apply it to the buttons themselves in the interactions panel.
select your button and go to interaction panel:

chose “scroll into view”:

start a new animation and create it:

Hope this can help you.