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://haystaqdna.com (but without the inter-slide animations)
Mac - Apple
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 – fullPage.js | One Page Scroll sections Site Plugin – 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?
