Sticky Section with Horizontal Scroll

The rate at which Google is destroying things is staggering. Each update brings CSS bugs. They don’t even respect anymore CSS specs for things like masks, I have to update my demos all the time, cheating with CSS specs to make it work in Chrome. Add to that the push to SSL, the push to their tech to speed mobile pages… seriously Chrome is on a good path to become the new enemy.

It suddenly seems so important that Webflow started to support Firefox!

Fixed Chrome bug by forcing the title into 3D space by setting a self perspective on it.

2 Likes

Those bastards! … Anyways, thank you for taking a look. That sounds … like something I don’t know yet. If it’s not too much trouble, could you please tell me how did you force the thing to a 3D space?

Thank you again

“forcing a thing into a 3D space” is something you’re sometimes forced to do in order to solve 3d transform bugs and zindex bugs. Here, it solved my issue, but I don’t really know why or if there’s a better method.

What I could witness is that along my interaction, the element containing the starry skies, that is moving lateraly, jumps over the title. I set up the starry skies at opacity 50% and I could see the title going behind, even though it has a higher z-index than the skies.

So in order to try to make chrome to stop doing that, I tried 3D transform, to give more power to my title. I could have displace my element 1px on the z axis, but I chose something else, giving self pespective to the element, it’s a 3D property that doesn’t displace the element, but tells chrome (probably) to draw it in a different way, a different space.

http://vincent.polenordstudio.fr/snap/Webflow_-__Horizontal_scrolling_Sticky_Section_with_Fixed_Title_2019-02-08_14-53-39.png

2 Likes

You’re the best. Once again, thank you sir.

Honestly I’m just lucky this works, thos tricks are usually for when you’re already working in a 3D space. However it’s not so surprizing it works. It was a visual glitch, and by setting a 3D property, I force Chrome to use the GPU to render that element. So it’s possibly a totally different method to render the element, and it fixes the bug on the way.

To fix a buggy 3D interaction, you sometimes have to force element in or out a 3D space. You can for example just do transform: translateZ(0);or backface-visibility: hidden; or perspective: 1000; to force an element in, and transform-style: flat; to force a sibling of a 3D element out of the 3D space.

1 Like

Hi Vincent this is awesome, thank you so much. Is there a way to shorten the width side to side, if you don’t want to many images? Here is my project(link below) I am trying to get rid of the dead space on the right after you scroll through the images, but can’t figure it out? Thanks in advance for the help.

https://preview.webflow.com/preview/unatti-foundation-v1-fca786103949121ca6?utm_source=unatti-foundation-v1-fca786103949121ca6&preview=7a58efa4f33c269f1a2ae8ebe582e764

Vincent, is it possible to link to sections within a horizontal scroll?

Yes, the horiz scroll is bound to the vertical scroll, so place IDs somewhere in along the vertical sections and linking to them will smoothly scroll to the desired horizontal section

Sorry just to make sure we are on the same page, looking at horizontal only scrolling website. So linking to sections within a horizontal scroll wrapper.

1 Like

Hi all,

Such an elegant solution @vincent Thank you!

Is there a way to add something like this?
https://files.tripleyourtraction.com/CBLHwH

So I can manually scroll through the testimonials?

That would be rad :smiley:

Thanks y’all.

My Read-Only Link:
https://preview.webflow.com/preview/clearlyplayground?utm_medium=preview_link&utm_source=designer&utm_content=clearlyplayground&preview=8cab0fb8f357dc96304ff75746ee2346&mode=preview

PS: The Horizontal scrolling section is at the bottom :slight_smile:

No luck? Should I maybe start a new thread asking about this? :smiley:

Thanks!

Difficult to add… there is no notion of scrolling horizontally. What you can do is having dummy sections with IDs, placed vertically alog the tall vertical section, and representing horizontal navigation points. You can then link to those IDs with buttons. But a “Next” button will be difficult to do.

1 Like

@vincent This is awesome. Thanks so much for this!
I love this for Desktop!! However, is there a solution for tablet/mobile that can disable the horizontal scroll section? I’m looking to either make that section vertical, and stack the a blocks… (like iPad Pro - Apple )
…or just have that section swipe to scroll horizontally? Any help would be appreciated!
Thanks

@vincent hi, Vincent, thanks for sharing this, it is really helpful.

There is an issue I am facing — on smaller resolution screens it seems that some of the content is cut and on the other hand on larger screens, there is plenty of space after the content.

Please have a look at the screenshots

Is there a solution to that?

@vincent
Hi, Thanks for sharing this. Awesome tutorial.

I am looking to accomplish this same thing with a horizontal scroll section that does not take up 100vh. Any solution to this?

For example:

In the above scenario, when section 2 comes into view, the normal scroll results in the horizontal scroll of section 2, and when it ends, normal scroll resumes. I can’t create this in current scenario coz of extra height I would have to give to section 2 which would push section 3 down.

Thanks

Add an extra div to put the content of the sticky div in, then add all your extra content into the sticky div, enough for the sticky div to never be shorter than the height of the viewport (to avoid empty space).

image

Here’s a link to a copy of the demo page, where I did so:

https://preview.webflow.com/preview/horizontal-scrolling-sticky-section?utm_medium=preview_link&utm_source=designer&utm_content=horizontal-scrolling-sticky-section&preview=3a5033f942b84f4c8e23073dc9b553a1&pageId=5f353d3c6760b03b73b8e12c&mode=preview

1 Like

This is great! Took me a while to understand what you did here. This helps a lot. Thanks

1 Like

hi @vincent or anyone else that might know…

I’m able to get the horizontal scroll to work, but am having trouble implementing sticky positioning for the elements within the horizontally scrollable div so that they appear to stick and are then replaced by the next element.

Any advice or tips on how to accomplish this ?

@Vincent

Hey Vincent, first off thank you very much for the efforts to make this design in Webflow and sharing it! So when copy the cms version into my project and link everything up, all work fine till I go to the phone breakpoint and then it seems to put space above and below the middle viewing part.

No clue how come it won’t work on mobile in this case, in your example it works on those breakpoints.

Hi @vincent,

First of all: thank you very much for this very helpful solution.

I have been using this to create a horizontal scrolling slider/homepage kind of thing.

The scrolling part is working awesome and I have been able to add some extra animations:
https://planslab.webflow.io/

At this point I would love to add some extra interaction on the navigation items on the bottom of the page. I have tried to link the second item ‘Expertise’ to section with ID ‘Slide2’.

When clicking there is some scrolling happening, but that’s about it. Unfortunately it is not scrolling to the targeted section.

I am quite new to Webflow, so obviously I am missing something.

In the comments I already read something about adding anchors?
But I am not sure on how to implement them.

I really hope for someone to shine some light on it.

Thank you!

EDIT: I have figured it out. I have place some anchor divs in ‘the height’ section with section ID’s.