Streaming live at 10am (PST)

Problems to recreate horizontal scrolling

Hello everyone.

I am trying to recreate this page https://www.creativedrive.com/industry-specialties/ into webflow. It was originally built in WordPress. I have been following the demo made by @vincent in https://horizontal-scrolling-sticky-section.webflow.io/ but I just can’t get it right and with a natural scrolling interaction. Could anyone take a look and provide some feedback, perhaps @vincent or @PixelGeek.

I’m not done yet with the layout, but I just want to have the interaction working for now. I will appreciate it very much.


Here is my site Read-Only: https://preview.webflow.com/preview/target-cd?utm_medium=preview_link&utm_source=designer&utm_content=target-cd&preview=ef3ac1350cfb53fcac111f843648db14&pageId=5ee0250432ea8f58b0ce060f&mode=preview

It seems to work, mostly, what’s the issue exactly?

The WP reference has a real horizontal scroll, which IMHO should be avoided at all cost: side scrolling is unintuitive, and hard with many pointing devices.

My demo scrolls a section horizontally when you scroll vertically. It’s way moire intuitive and natural.

Fix those thoigh:

image

Thanks for the reply Vincent. If you scroll to the bottom (right) it jumps like a sticky menu. I’m not sure if it is something with the given measures. Also I will have to replicate several pages like this and some have less or more content. How can I make the scroll stop when there is no more content to show?

Thank you very much.

Hi Vincent, it’s me bothering again. I think I fixed the issue with the menu. The problem I am getting is that some pages have more content than others and the horizontal scroll is not showing the entire content. In other words, it does not get to the end and I need it. I have tried everything but can’t figure it out.
Do you have any idea how can I make it work? @vincent @PixelGeek @aaronocampo @Waldo @sabanna

https://preview.webflow.com/preview/target-cd?utm_medium=preview_link&utm_source=designer&utm_content=target-cd&preview=ef3ac1350cfb53fcac111f843648db14&pageId=5eed2ab51c86f2bd365a3f99&mode=preview

Please.