I'll KISS whoever's the first to figure this out. Change Page on Scroll

I’ve been seeing this effect more and more on awwwards.com and I’m curious if it’s possible in Webflow.

Notice how the site links to the next page whenever you scroll to end of your current page…HOW?!

:heart:

Hi, I’m the developer of Sacha’s Portfolio :wink:

So basically for the page switch when scrolling, I’m just watching the scroll progression.
When the main container reaches a 100% translateX, I push the next page with the router.push function of VueJS. Same thing when the container reaches a 0% translateX.

Unfortunately I can’t tell you if it’s possible on Webflow or not, since I’ve never used Webflow :sweat_smile:

4 Likes

Just wanted to tell you, that’s a beautiful site!

1 Like

Thanks Andy! That means a lot to me :smile:

1 Like

@fxmanceau As a complete coding novice, sorry if this is a silly question. There appears to be minimal/no load time between your pages. Is this something you achieve with javascript, or do you simply mask the page load with an animation/transition?

There are no silly questions :wink:

Indeed, there is no loading time except at the beginning. The site is a VueJS SPA, so technically you only load one page, but there are still virtual pages. When you switch between pages, there is a transition but only for the aesthetic.

On Sacha’s portfolio, I fetch data when loading the site for the first time (so it only loads big size files/images/videos, and all the texts of the site from a custom API), then I store it into a global variable (thanks to VueX), and I also put it into a localstorage variable. This last thing is to make the portfolio available when you are offline (PWA combined with localstorage).

1 Like

That’s awesome, thank you very much for the detailed reply! :slight_smile:

My please :wink:
If you have further questions, feel free to contact me on Twitter!

1 Like

Yo man I got some js for you! No kiss needed! This only changes when you scroll down. However I would tweak it with some offsetting so there’s no bad UX

window.addEventListener(“scroll”, () => {
const scrollable = document.documentElement.scrollHeight - window.innerHeight;
const scrolled = window.scrollY;

if (Math.ceil(scrolled) === scrollable) {
window.location.replace(“https://google.com”);
}
});