Hello dear Webflow users,
I’ve come a long way but having some problems adding borders (20px each) to my slides in the ‘horizontal scroll section’. I followed https://www.youtube.com/watch?v=p-tTikEL4D8 and changed it a bit to accomplish full screen sections.
Example:
I want the middle stroke to be visibile in both full screen sections (so first on the right side, second on the left side), but only once (20px) while scrolling. If this is even possible?
Hope to hear some solutions and/or options. Many thanks in advance.
Here is my site Read-Only: LINK
Published link
Hi @Silvan_Soeters,
I’m not sure if I’m understanding you right, but you can do this with a the interactions “While page is scrolling”. And you have to move the middle stroke form one side to the next.
Mmm I think I understand what you’re saying, but:
What about the other borders (top-bottom-left(first slide)-right(second slide))?
I can’t figure out how to add any of these. I tried adding paddings/margins to different divs but nothing worked in my case.
So before I can even try your suggesting for the middle I hope you can take another look.
Add a white border of 1.5vw on the first slide (it will add to both as they are the same class)
Add a left margin on the second slide (combo class) of -1.5vw to make the middle margins overlap
Change “horizontal scroll content” width to 198.5vw
Change “horizontal scroll content” scroll animation start to 34% and x value to 0vw
Change “horizontal scroll content” scroll animation x value to -98.5vw
Seems to work fine on my end. Let me know if that works for you.
Yes thank you! Definitely works and wouldn’t have thought of this myself.
I forgot to mention I needed the left and right border to be visible -all the time- so it would act as if you’re looking through a frame. I somehow managed to make this work but in a kind of strange way and it’s not 100% unfaulty. I added 2 sticky divs, width 1.5vw, above the ‘horizontal scroll section’, this works but because of the browser scrollbar it doesn’t matches exactly with the slide width.
If you got a better solution for this I hope to hear from you again.
PS: I eventually removed the middle border because it was getting too much with the white elements moving through, if that makes any sense.
I am on a Mac and I can’t replicate your issue. The scrollbar in my browsers doesn’t affect the layout in any way. It seems to work fine on my end.
Sorry for my late reply. This is what I mean:
The scrollbar overlays the content. Normally it wouldn’t matter that much but in my case it covers half of the right border - or moves the fixed border so it covers a tiny but noticeable part while scrolling of the slide.
The only option I can think of now is to hide the scrollbar completely and do something with a custom cursor that says ‘scroll’ e.g.
Thanks for your help again. I’ll play some more.
