Conflict of page scrolling animation and page load animation on the same element

Design help Animations & Interactions
1

So I have this top navbar that I set up so that it slides up and hides itself when scrolling down, and reappears when scrolling up.
I also wish to make it slide down upon page loading.

But somehow when I have both page load and page scroll animations, the pageload one gets disabled for the top navbar.
If I disable the page scroll action, the navbar animates on page load just fine.

Is there any way to resolve the conflict?

Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]: https://preview.webflow.com/preview/projectroc?utm_medium=preview_link&utm_source=designer&utm_content=projectroc&preview=db675d36f2baf37d00743a2c6a53a567&mode=preview [2]: Share a read-only link | Webflow University

2

Actually just figured it out. Don’t set the hidden state as initial and it solves the problem.

1 Like
3

Hey, not sure if you could shed some more light on your solution. I am having the same issue. The animations that I am trying to get working are hidden by 0% opacity and then move into view and the opacity goes up to 100% on page load. After the animation is complete Id like for them to move when I scroll but the initial animation gets all messed up when I add the scroll animation.

4

thank you this helps me fix the same problem!