Streaming live at 10am (PST)

Duplicate Slider Navigation for An entire Page not in Slider


#1

A client wants navigation arrows that act like slider arrows, in that when a right arrow is clicked the entire page slides in from right and then if the left arrow is clicked the previous page slides in from the left.

Any suggestions on how this could be handled in Webflow or with an additional script?


#2

Hi Jason.

Can you precise a couple of things? Is the entire page longer than a 100vh section? Like a long page? (if not, a big slider could be used...)
When we talk about page, is it a real HTML page? Like when we click an arrow, the URL change?

If yes to the second question, it's hardly possible with Webflow. But it is entirely possible with Javascript. It requires a bit of skills as you have to manipulate the DOM to animate from a page to another, but it is quite what the modern web is made of. We do such things here with NodeJS but it's just one framework among others.

This kind of behavior gives websites an "app touch", when it's done well, it's kind of great. An upcoming project will se this kind of page swap coded with Node.js, and all the pages will come from Webflow. I don't know yet how we can preserve Webflow compatibility (meaning adding the JS directly in Webflow to be able to continue designing as long as possible without having to export and perform tasks on the site structure to make it work.


#3

@vincent Thanks for your response! Yes the pages are long. I'm not a coder but would love to learn more. Any code or detailed steps you could provide would be really helpful.


#4

I've been telling you my entire knowledge about this in one post, really smile I don't even know if this JS addition to manipulate the DOM can be done by adding script or linking to a JS API or is you need to export the site and develop from there... I can ask.


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.