How can I create a Webflow site with half-scrolling sections, where the left side controls the scrolling of the right side and the right side cannot be scrolled until it reaches the top of the page?

Creating a Webflow site with a scrolling interaction where the left side controls the right side is a specific visual effect often referred to in design as a "synced scrolling" or "sticky scrolling" effect.

​

1. Setup the Basic Layout

• Create a new section in your Webflow project. This will house two side-by-side div blocks acting as your left and right sections.
• Set the section to Flexbox with a horizontal layout. This allows you to position the left and right divs side by side.
• Add two div blocks inside the section: (a) for the left content and (b) for the right content.

​

2. Configure the Left Div Block

• Set the left div to a fixed height, e.g., 100vh, to cover the full viewport height.
• Populate the left div with content (e.g., navigation or text) that will determine the scroll interaction.

​

3. Configure the Right Div Block

• Set overflow to hidden for the section housing the divs, ensuring the right content remains in place until it’s supposed to scroll.
• Populate the right div with the content you want visible. Add a larger content height than the left to allow for scrollable content.

​

4. Implement Interactions

• Use animations and triggers in Webflow to connect the scrolling action of the left div to animate elements of the right div.
• Scroll triggers on the left can be set up in the interactions panel to move the right div's content. For example, as the left div scrolls, you can animate the position of elements in the right div accordingly.

​

Summary

To create a Webflow site with half-scrolling sections, design a flexbox layout with two side-by-side div blocks. Control the right section's scrolling through scroll triggers and animations activated by the left section's interaction. Ensure sections have fixed positioning and restricted overflowing to achieve the desired effect.