Horizontal scroll with sticky divs / can't figure it out

Design help Layout & Design
1

Hi guys,

I am building a website with a section that has a horizontal scroll interaction.

I built it based on a Webflow tutorial and it works great Advanced interactions: Horizontal scroll in Webflow - YouTube

The only thing I can’t figure out his how to make the 4 individual divs be sticky when I scroll, so each div is “overlapped” by the next instead of just scrolling through normally.

Tried to set the 4 divs to sticky with 0px left and on top but that doesn’t work. Also played around with which element they are relative to but I just can’t get it to work :frowning:

Page structure:

Section: Auto x 400vw
→ div: 100vw x 100vh, sticky at 0px on top (overflow hidden)
→ div: Auto x 100%
→ div: 100vw x 100vh (doesn’t shrink or grow)
→ div: 100vw x 100vh (doesn’t shrink or grow)
→ div: 100vw x 100vh (doesn’t shrink or grow)
→ div: 100vw x 100vh (doesn’t shrink or grow)

I would much appreciate any suggestions!! :slight_smile:

Mia

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Can you share the URL of the page and also preview link of your project?

You can see how to get preview link from here Share a read-only link | Webflow University

3

Hey Marko,

Thanks for your reply :slight_smile:

Here is a link to the published sample (I don’t have any content in it yet, just trying to set up the general layout first

https://mias-radical-site-89c96f.webflow.io

Here is the project link:
https://preview.webflow.com/preview/mias-radical-site-89c96f?utm_medium=preview_link&utm_source=designer&utm_content=mias-radical-site-89c96f&preview=74a2dd152d64105f72245272de2b9db4&workflow=preview

4

Hey, I’m not sure if I understand what you are trying to achieve.

I created a mockup here , is this what you wanted to do

5

Thank you - I don’t think I explained well the first time round -

I just created another version in the same project - below the horizontal scroll you will see what I’d like to achieve (just that it’s not working in the right direction).

I hope I am making more sense :sweat_smile:

Thank you so much for your help and I hope that you can show me how to magically work this :smiley:

6

Could it be the case that I have to remove the animation and only make the divs sticky somehow?

7

Webflow seems to be down atm, i’ll post an update tomorrow

8

@mia.99 CAn you check the same preview link now, that should be it

9

Hi! Thanks - I just checked your mockup link but I don’t see any scrolling effect - the photo of the group of people is static and then it scrolls down to the buffer section :confused:

10

You need to turn off and on preview mode when initially viewing the preview link for animations to start working, that’s always been a bug with preview links, not sure why @mia.99

11

I’ve just managed to go into the view where I see the navigator + settings

Just previewed the animation - and that’s exactly what I want to happen!

I’m going to try and copy that now, thank you so so much for your help!!

1 Like