Two divs scrolling in opposite directions

Design help General
1

Hello everyone,

Is it possible to do something like this in Webflow;

 -------------
|      |      |
| down |   up |
|      |      |
 -------------

Having the viewport split vertically in two divs, which scroll vertically simultaneously but in opposite directions.
So that scrolling on either div would have them both scrolling, one upwards and the other downwards.

A quick search pointed to window.scrollY, but

  1. Is implementing the above too advanced a challenge for a beginner, or should I give it a try?
  2. I don’t suppose I could build something like that in the designer?

Thank you very much in advance fir your replies :slight_smile:

2

You can achieve it with IX2 an the appropriate trigger.

Go here and clone the project Sticky + Horizontal Scroll Demo - Webflow. Try to understand how it works. Basically, you want to use the same scroll trigger to make your up section go up.

You should suppose it :slight_smile: If this works, it will work in the designer.

You have certain layout challenge to sort out before jumping into IX. You need to craft a layout where the down section is normal, natural, and a up section that is floating on the page, that is setto sit up higher with a transform or a position, and not breaking the layout when it goes out of the viewport. Also, it can be more difficult if the two sections are 1/ not the same height and 2/ supposed to often change in term of height.

1 Like
3

@vincent
Thank you so much for your reply! You are like the Batman of Webflow, you always show up :smiley:

Armed with your encouragement, I will work on this and report back with my results :partying_face:

1 Like
4

Hi. I was trying the same thing. Were you able to make any progress? I tried it myself through scroll interactions, but I’m hung up when scrolling to the last section on the opposite scroll module.

Another set of challenges would be a snap to section feature and also navigation to jump to the corresponding pairs.

Here is my quick demo of it:
http://columnscrolltest.webflow.io/
https://preview.webflow.com/preview/columnscrolltest?utm_medium=preview_link&utm_source=designer&utm_content=columnscrolltest&preview=3d62da795eed66a801c881f57cf351c1&mode=preview