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
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…
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
.
Edit: Change the animation target to Div block
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:
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.