Scroll interaction offscreen creates horizontal scroll bar

I am trying to create a hero scroll interaction so that an image moves offscreen as you scroll down. The main issue I seem to be running into is that once offscreen the horizontal scroll bar kicks in. I am sure I am missing something but not sure what it is. Any help is much appreciated! :blush:


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

Try adding 1 more layer inside the main wrapper … the main wrapper can be full width and will have inner padding then … add another div… and put content in there and make that one overflow:hidden… should stop the scrolling. Take care.

3 Likes

Thank you very much :slight_smile:

Not a problem… Have fun!

Just to point out - I have put no scroll on section and div that the clouds are under and doesn’t work…

1 Like

Can you share your read only link?

image

You need to put the animations inside a div that is set to no-overflow

I did but the cloud is a background image of the div - is that correct?

I tried setting that div to no scroll, the one above (also a div) and even the section it is in - only the divs with clouds in the section.

Here is the read only: Webflow - Airocide Version 1

If I inspect and set overflow-x : hidden; it works pretty well and because it’s a free version i can’t do it but if that is a solution, when I pay and publish I will just do that?

Thank you! I’m fairly new to webflow and I’m glad to say this worked! Cheers!