Section with 2 sides - inverted scrolling layout

Hi,

I would like to make a 2-sided section with a special scrolling behavior.
On the left, I would like to have the content to scroll the normal way (upward)
On the right side, I would like to have the content to scroll the opposite way (downward).

Here is a pic of the layout and the behavior I want to archive:

I’ve tried many things but still stucked, so I hope someone will help me.

Thanks

Hey @martinreboux, I am able to achieve this by using the While page is scrolling interaction.

Feel free to pick it apart and copy to your project: https://preview.webflow.com/preview/prototype-density?utm_medium=preview_link&utm_source=designer&utm_content=prototype-density&preview=1c98fa31cc6b74ba047d662519406ef1&pageId=5eb5ce79a7e51e0327b2fe2f&mode=preview

Hi @dennyhartanto,

I have opened your project and it looks almost what I need for the two first color (red is not working has intended).
I don’t use the while page is scrolling interaction since the section is part of a page were there are different behavior. That scrolling effect shall take place only on a dedicated section.
I used the while scrolling into view interaction starting when fully visible, ending when starts existing. For some reasons, the interaction never starts…

Hey @martinreboux , can you share a read only link for me to check out?

I’ll remake the layout on a dedicated project, will share soon.
Thanks !

Here is the read only link:
https://preview.webflow.com/preview/double-scroll?utm_medium=preview_link&utm_source=designer&utm_content=double-scroll&preview=952aaaa18f43b5a64a65a623055f4e5f&mode=preview

In my example, I have set that we will have 3 different displays.
Here is what I did:

  • main section is 300vh
  • left side: one div with 3 content div set at 100vh each
  • right side: one div set at 100vh, position as sticky, 0% top margin, overflow hidden

The idea is to use the right side as a fixed frame (sticky + overflow hidden) to let the left scroll while using a absolute left fixed wrapper containing the matching content of the right side to move from top to bottom. I used the while scrolling into view interaction to make this wrapper go downward but for some reason, the interaction doesn’t start…

Hey @martinreboux,

  1. Change the structure of you element to this. I don’t know what the right frame was for so I deleted it.
    Screen Shot 2020-05-09 at 20.57.31

  2. Make right_wrapper: 100VH height; position: sticky; top: 0

  3. Change the target for the animation to the Div block above content.

  4. Change the settings of the While scrolling in viewScreen Shot 2020-05-09 at 20.57.41

I have tried but doesn’t work. What are your settings on the move interaction ?

Hey @martinreboux, I was able to replicate it again following the steps I wrote. You have added the interaction on the wrong element. The interaction should be on scroll_section not div block.

Screen Shot 2020-05-10 at 16.04.32

Edit: Change the animation target to Div block Screen Shot 2020-05-10 at 16.07.18

You missed step no. 4

Yes, that is working now, thanks.
Just need to work with offsets because for now, both sides aren’t moving the same way

The suitable settings for the animation boundaries are as shown below:

In this case, I have 3 displays leading to a 33% offset for the end limit.
For 2 displays, it needs to be set at 50%. So I assume is would be 75% for 1 display and 25% for 4 displays.

So to sum up, the solution is as following for a 3 displays layout:

Main Layout:

scroll_section settings:

  • 300vh height

left_wrapper settings:

  • display: flex
  • direction: vertical
  • 50vh width

right_wrapper settings:

  • 50vh width
  • 100vh height
  • overflow: hidden
  • position: sticky - 0 top margin

content settings:

  • 100vh height
  • combo class set for each iteration, order shall be inverted between left (A, B, C) and right (C, B, A)

left_content_wrapper settings:

  • all settings left as standard

interaction settings:

  • while scrolling in view
  • start when element is fully visible
  • end when element is fully invisible with 33% offset
  • scroll action 0%: target isleft_content_wrapper behavior is move, y value set at -200vh
  • scroll action 100%:target isleft_content_wrapper behavior is move, y value set at -200vh

For different displays amount, the scroll_section height and the end when element is fully invisible offset shall be changed to appropriate values like respectively, 200vh and 50% for 2 displays, 400vh and 75% for 4 displays.

Hope it helps and big thanks to @dennyhartanto for the assistance.