Page jumps when linking in-page and setting display to none

Hi,

I’m not sure my problem can really be fixed, but I was wondering if anyone has ideas on how to make this interaction smoother. When each project in my “Work” section is opened using the “Learn More” button, the project area changes in width and all other project areas get set to display: none. Because of this, when I click on “Learn More” for my second project (“I’m Listening”), the page jumps up before scrolling back down.

If anyone can think of a “fix”, it would be greatly appreciated!

Published site link: https://www.yaelhubert.com/
Read-only link: https://preview.webflow.com/preview/portfolio-2-76786e?preview=3a26896c9dd0ff6ea29ce3fb9d59184e

Hi @tarlyo, first, great site! Second, I think the built in section scrolling is affecting to that in combination with the available space that is removed from the page when the element is set to display none.

I will be happy to check on this further, but I think this behavior is to be expected when changing the display of the element to none, causing other page elements to fill that space, plus the combination of the section scrolling…

I will let you know when I have new info.

@cyberdave any updates?

Hi @cyberdave,

I know it has been a while since I posted this, but I was wondering if you might be willing to take another look at it? The issue gets worse as you open projects farther down the page, and is very apparent when opening the final project.

Let me know what you think!

To be honest the whole site is jittery and it feels like struggling to scroll and open sections. I absolutely love the layout though, perhaps you will consider just refactoring everything to make it less resource-hungry? It stutters on my gaming system which is insane.

Yeah, it is a little glitchy, although it works almost perfectly on Chrome on my laptop. The main problem is I’m not really sure how to make it less glitchy and jittery. Let me know if you have any ideas!

No ideas. And your read-only is long dead :wink: