Streaming live at 10am (PST)

IX2 Horizontal Scrolling


#22

Did anybody figure this out how to recreate horizontal scroll for a section rather than a full-screen? Wanted something similar to the IX2 section submitted by the OP


#23

Same here! @PixelGeek are you able to advise? Greatly appreciated.


#24

Not sure if this will make any sense but the only way I was able to get it to work was to make the horizontal scrolling area in a fixed section and make sure all other sections have a higher z index. Then I made a large blank section section for the fixed section to show through on scroll. I was able to tweak the interaction just right so that it appeared to actually be scrolling with the rest of the page. Not ideal at all, but it worked. So really the fixed section is always there you just can only see it when the blank section comes into view. Would love to figure out a better way.


#25

Yeah, I’d love to also see a demo that shows the same use case as the OP. Where a section seems to “pause” scrolling vertically while the animation happens horizontally then, when the horizontal animation is complete, vertical scrolling continues.

Any chance we could get a demo video for that, @PixelGeek?


#27

Hi @PixelGeek. Please how can I make the horizontal scroll to each section like this: https://projects.lukehaas.me/scrollify/#home. Instead of scrolling multiple times to scroll to each section. Thanks.


#28

I tried the way you did it and worked very well unless you want to add links to the sections scrolling horizontally. When z-index is set to negative it is not possible to hit elements at that level. So I when another way around after inspecting the Webflow ix2 page. The key was using the CSS property “position: sticky;” for fixing the parent container of the long one that moves horizontally.
Here is the example http://test-scroll-vert-horz.webflow.io/
You can use this link to inspect everything:
https://preview.webflow.com/preview/test-scroll-vert-horz?preview=efed0f7a3c37cf96d5fb54bff41cb23c

I hope this works for you!


#29

Hi Nelson,

This is great. I’ve started to implement this into my build, is there anyway to make the horizontal scroll snap to each section?

Many thanks

Darren


#30

Now we can not use custom code for position “sticky” :wink: