Overflow Clip - Almost does it!

Design help General
1

Hi!

I have a one-page scrolling website where, at some point, I start a horizontal “while scrolling” interaction, triggering an overflowing content from the right (about 500VW).

Sticky behavior is used on the page, so everything is wrapped into a “page-wrapper” DIV with overflow set to “Clip.”

It ALMOST does it, except that once we triggered the said interaction, overflow is unlocked all over the page (i.e., the page stops being nicely wrapped within the viewport, allowing horizontal scrolling all along).

I’m sure there’s an easy fix, as this problem must be quite common.

@memetican @vincent ?

Published website: https://imber.webflow.io/
Here is my site Read-Only: LINK

2

Hi there,

Horizontal scrolling issues with interactions typically occur when animated elements extend beyond their container boundaries. To resolve this, you’ll need to set the appropriate overflow settings on the parent containers:

  1. Locate the section or container where the horizontal scrolling occurs
  2. Select the parent container in the Navigator panel
  3. In the Style panel, set “Overflow” to “Hidden” or “Clip” to contain the animated elements
  4. If the issue persists, check the next parent container up in the hierarchy and repeat step 3

For complex animations, you may need to adjust the animation settings to ensure elements stay within their intended boundaries during the entire animation sequence.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

The point 4. did it! The overflow:clip needed to be apply on another parents.

Thanks!