Need Help with "While Page Is Scrolling" Animation / Navbar Button Issue

Hi Webflow Community :wave:

So, I’ve hit an issue with my While Page Is Scrolling animation and its connection with navbar section links.

You could call it a bug, but I don’t think its a bug with Webflow necessarily as much as it probably is to do with how I laid out my elements (there are a fair few div containers with Absolute positioning), but I’m unsure if this is what is causing the “bug”.


What should happen :

Essentially when the user scrolls with the scroll wheel on their mouse, the page animation should appear gradually, as it currently does without issue.

However, if the user presses the “Work” button in the top aligned navbar (I made its text yellow in the video (below) for context), they should be directed to the first project in the list of five projects on the page scrolling animation (to exactly 22.5% down the page). The same logic should persist for the “About” button in the navbar; that should direct the user to the about section. The same goes for the “Contact” button; contact section.


What is happening [ “BUG” ] :

While the “While Page Is Scrolling” animation works perfectly fine and as it should through the use of the scroll wheel, the navbar buttons’ logic does NOT, which is the issue at hand.

If you press the “Work” button in the navbar currently, for some reason the button’s on-click event will only scroll the page down about 5%.

The animation for when the first project elements are all visible is exactly 22.5% down the page (hence the reasoning for my previous comment above).

So, instead of it scrolling 5% down the page on click, it should scroll to 22.5% down the page.

Also, for some reason (again), once it gets to 22.5% down the page (by repeatedly clicking the “Work” button), the on-click event still registers and proceeds to incrementally scroll down the page even further beyond where its section should “end”.


The video for context :

Firstly displaying the usual (and working) scroll animation via the scroll wheel (00:00 - 00:22).

Lastly displaying the issue regarding the navbar button logic (00:23 - 00:53).

Context video (YouTube unlisted)


Could anyone offer any advice to spawn a solution to this issue, please?

Is it to do with my element structure or is it a Webflow bug? or something else entirely do you think?

I’ll leave my webflow project link at the bottom of this post so everyone can see the bug for themselves, and the structure of my site elements and their properties.

Many thanks in advance for any help anyone has to offer.

Cheers,
Elliot

P.S: I should note, the site (linked below) is not exactly responsive at the moment, viewing it in the designer at either 1920px or 1512px are preferable for a decent viewing experience.


Here is my public share link: LINK
(how to access public share link)

Hey Elliot,

Since no one else has replied here - I’ll throw in my two cents. I’m extremely new to webflow, and what I think is the cause of this problem may not be entirely true, but this is what I’ve figured out.

So right now, the div that has your content, it’s position is set to absolute, relative to the Sticky Container.

The sticky container , is set to take up the height of the entire view port - and since the div is set to absolute without any change in the positioning, it’s been centered to the sticky container - hence also centered to the view port.

Like you’ve mentioned, you are required to scroll 22.5% for the project content to be visible.

But the problem is that the top of the div, since it’s absolutely positioned, is just 5% from the top of your screen - and when you scroll to a section, it scrolls till the section touches the top of your screen. Hence - you scroll only 5%.

This solution that I have may not be optimum, but might help you get a rough idea of what you need to do. Hopefully someone more experienced can come and help you out with the best solution, but here’s what I did.

  1. Create a Div Block, within the “Scroll Container”
    image

  2. Give this Div Block an ID - you might guess where we’re going.
    image

  3. Set the Div Block position to Absolute, and align it to the top.

  4. Now, like you said before - the page needs to scroll 22.5% in order for the entire animation to play out.
    So, give this div block a padding of 22.5% from the top.
    image

  5. Now, select the “Work” button, and set it to navigate to this Div block - in this case, navigate to “test” section.

So now, when you click on the Work button, it actually scrolls down to the Div which is 22.5% down, since thats where the div is positioned. Whereas earlier, it was scrolling only 5%, because that’s where your project content container was positioned.

This may not be the best solution, but should be a work around until someone comes along with a more robust solution.

Hope this helps!

Hey Neel,

Thanks for your reply!

While waiting for answers I ended up solving this issue in a similar fashion. I just never got around to posting it.

So, for now, I’ll mark your answer as the solution :slight_smile:

Thanks again, Neel!

1 Like