Streaming live at 10am (PST)

Split Screen Scroll Interaction


#1

My client love how this site 'splits in two' as you scroll down, I've been trying to replicate it in Webflow and failed miserably!

Can any of our Webflow gurus help please?

Thank you


#2

You mean one half of the screen stays still and the other part scrolls normally?

Make a section with width 50VW height 100VH, position fixed. Another div underneath with a left padding of 50VW, and see from there.

Or you mean a section goes up and the other goes down? You need Javascript for this.


#3

Thanks @vincent yes, one half up and one half down,
So I can't replicate it using Webflow at all but would have to use (or find someone who can use) Javascript?


#4

Correct. What this behavior requires is something called "scroll hijacking". Javascript captures the movement of your mouse and translate the values into any kind of behavior. So you would design your 2 sections side by side and the script would scroll the first section all up at the loading of the page, and do a reverse scroll on it as you scroll down the site... it doesn't seem too complicated to me but I don't code so I could be very very wrong :slight_smile:


#5

Thank you @vincent I guess I know what I am learning to do this weekend!


#6

This topic was automatically closed after 60 days. New replies are no longer allowed.