Streaming live at 10am (PST)

Full-screen vertical slider


#1

I'm trying to create a page that contains four full-screen sections that auto-scroll vertically as users move down the page. Basically, a vertical slider that automatically fills the full height of the screen. Some examples of this in action:

http://www.hugeinc.com
http://haystaqdna.com (but without the inter-slide animations)
http://www.apple.com/30-years

Does anyone have any tips for how this could be done in Webflow, either natively or using embedded code? The closest Webflow-native approach to this I've been able to come up with is here:

https://webflow.com/design/scrollingtest?preview=bd23f45b9ceca5b84869a4d1b8bb7c1d

The problem with this is that the sections don't auto-scroll into place as the user moves down the page like in the three examples above; unless the user clicks or taps on the navigation, the page scrolls like a normal webpage. I would also ideally like the intra-page navigation to update with an on/off state as the user moves from section to section, like in the Webflow horizontal slider widget (but I know that's a whole other level of complication).

I've successfully used this -- http://alvarotrigo.com/fullPage -- handy code to achieve this effect outside of Webflow, but I would really, really like to keep this project in Webflow if at all possible. I tried using that same script, via custom code, in a Webflow project, but so far it's not working:

https://webflow.com/design/slide-test?preview=45ee001622a35792f0aa1419b07657f9

Does anybody have any tips?


#2

Hey @brks_kng, not sure if @danro is aware of better alternatives, but at the moment there's no native support for vertical sliders like the one you linked to. I'll investigate the fullPage plugin to see if we can integrate something similar into our native scroll code, but no promises yet.

For the fullPage-linked site (slide-test), are you seeing any errors in the Chrome console?


#3

Thanks @callmevlad. I'm getting these errors for slide-test in the Chrome console:

But I've implemented fullPage.js (in the kludgiest possible way) using the same code outside of Webflow and am not getting the TypeError message:
http://dogearstudio.com/example3.html


#4

Hello! You found a way to solve the problem?


#5