Responsive menu creates horizontal scrolling

Hello. I have a portfolio site that is still very early in the design process.

I wanted to take my website out of webflow to host on my personal server to see some of the things I could improve upon. When taken out of webflow however, the mobile version of my site has the menu extend beyond the view port and creates a horizontal scroll bar. I’ve noticed that this scroll bar only appears when I have the site animate in certain sections by applying a horizontal transform and opacity change when the section comes into view.

Here is what it should look like when viewed on a cell phone

And here it what happens when it first loads on a mobile site

The menu also doesn’t stay attached to the top of the viewport. However, once the final animation happens, the menu fixes itself.

Here is an animation of this happening

https://gfycat.com/EssentialEveryChrysalis

You can try this out on my website since I have it up and running.

http://joshuaa.me/

This is something I’d really like to solve. I don’t want to get rid of the animation but I won’t sacrifice my hamburger menu working correctly for them. Perhaps there is a better way to do the animation then what I’m currently doing. My webflow link is below.


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

You have objects sliding IN on scroll. So before sliding IN they are staying OUT, increasing the width of the page. To kill the h scrolling induced, pass the sections with sliding objects overflow:hidden.

Fixing this will also fix where you menu sticks.

Hi Vincent. I followed your suggestion and gave an overflow:hidden to all objects that had any kind of animation. I’m still seeing the same results.

Give the overflow:hidden property to the sections, the elements just under body, which contains sliding elements.

What it does is it tells those sections to stop rendering what’s outside of them, thus returning the correct width to HTML and your page rendering without a margin.

If you were bug free after the page loads completely, was because once the sliding objects in the page, the page had the desired width. As long as 1 object is still outside, then there’s a margin.

Hi Vincent. Sorry I wasn’t more clear. I did apply the overflow:hidden property to the sections, NOT individual elements. And I’m still having the same issue.

I do’nt see the bug happening anymore… are the objects still sliding from the left ?

I added an additional interaction that slides them in from the bottom now instead. I might just stick with this solution.