How to recreate this nice full page vertical slider?

[Dominic]

I have been using Webflow for a while, but have always struggled with creating a really nice full page vertical slider.
On the following page (not mine, and not webflow), about a third of the way down, the page changes into a full page slider:

R Series Laser Cutter

Does anyone have any examples of this kind of design done in Webflow?

[Andrew_Coderre (coderreco)]

Hey Dominic,

This is actually fairly simple to accomplish using a section with a large height value, a div with sticky scroll relative to its containing section, and then each “slide” built as a div inside the containing section with absolute position to stack them. I don’t think I have any example in my projects right now, but it’s not difficult to build. I just did something similar for someone through their read-only link.

Do you have a project you are trying to implement this on currently?

AC

[Dominic]

Thank you Andrew. I think I got about half way there. Just unclear how to get the pages to appear in place on mouse scroll rather than sliding up.

Here is where I got to:

https://preview.webflow.com/preview/vertical-slider-8cbac0?utm_medium=preview_link&utm_source=designer&utm_content=vertical-slider-8cbac0&preview=ab37ffcc050153cedfe8320bea2486c1&mode=preview

[Andrew_Coderre (coderreco)]

Hey Dominic,

I’ll do a quick walk through and send it over to you.

AC

[Andrew_Coderre (coderreco)]

Hey Dominic, here goes.

First of all:

I gave the section a specific class name which I would recommend doing in any situation, but it is especially useful here to name the classes based on what purpose the element has. For example, the section is our scroll container, the only adjustment you need to make is change the position from static to relative. This is so that your sticky element will be relative to the container, rather than the body.

Next, create a new div with the following properties:

I named it slide-wrapper, as it will be the mask that contains the slides and sticks to the browser window.

Now that your framework is set up, you create an interaction to control it.

I used the while page is scrolling animation. I always find it easiest to use. It is somewhat difficult to see how it works because the slides all share the same class name but its pretty basic. The first slide is not affected, but at the specified keyframes the next slide transitions from 0% to 100% opacity.

I tried to keep that as short as possible, hopefully that helps!

AC

[Darshak (Darshak Chavda)]

Hi @Andrew_Coderre, Can you please share a read-only link to your website? I want to see how you created the animation. I can’t figure out why it’s not working for me.