Alternate Vertical Scroll

Community resources General
1

Hi all, I was wondering if anyone can help me recreate this alternate vertical scroll in Webflow:

I’ve found a few tutorials on horizontal and also a single vertical but not anything on this.

Here’s my link:
https://preview.webflow.com/preview/door-fronts?utm_medium=preview_link&utm_source=designer&utm_content=door-fronts&preview=49adb6f52295947d5b4088c2d68e635e&pageId=632ed50696a21b7344391f38&workflow=preview

My last section also doesn’t sit underneath the previous one as I’ve had to place the previous one absolute. Struggling!

Thank you!

2

Hey @Ursula, have a look at the following cloneable from CJHersh. There are several scroll interactions, one called Split Scrolling.

Let me know if this is what you’re looking for.

3

Thank you! These are really useful but I am a bit confused. The split scrolling interaction is the one I’m looking for but when I preview it in the platform, the right column doesn’t move. Is this something that happens only after its published?

1 Like
4

@Ursula, you’re welcome. Yes, that is correct. This is because there is some custom code involved for it to work. If you navigate to the specific page settings and scroll down, you can inspect and edit the custom code. Any custom code will only come into effect when the site is published.

I hope this helps. Let me know, if there’s anything else.

1 Like
5

Just a quick question (I still haven’t got round trying to create this yet). Is using code the only way to create this effect? I’m not a coder tbh.

Thanks!

6

@Ursula, without having tried it myself, I guess it could be achieved with Webflow native interactions. It would be an interaction based on scroll, triggering one div moving up and another div moving down.

You might find something like this in the Webflow showcase (Made in Webflow).