Loading only within main content div

Hey guys,

I am working on a personal CV website at the moment, I’d rather not share the public link as it’s got personal content in it, but I’ve attached some images from XD to try to demonstrate what I want to do.

As you can see, on desktop I am going for a sidebar - content - sidebar kind of design, which is permanently at 100vh. On desktop, what I want to happen is when the user navigates to a certain page, have just the main content change (the middle div), while both sidebars are not refreshed, with the exception of the bottom right navigation (previous/next pages). I’ve seen this quite a lot but not sure if it’s possible natively within Webflow?

Is this possible in Webflow? Or will I need to use some custom JS/Jquery for said functionality (happy to do so if required)

1 Like

Hello @bpinnington

You’re looking for something like this > https://www.blaiseposmyouck.com/

You will need to add custom code in order to achieve the effect. Here’s a post from the Webflow Blog about page transitions > https://webflow.com/blog/how-to-build-page-transitions-in-webflow

@Blaise_Posmyouck Can you share your magic? :smile:

Yes, very similar, thanks for linking that. Infact, very similar in effect to this as well. I would like my left nav to ease out and cover the rest of the page. Then on click, ease back in to it’s original state and show the content within the main content div. I also want to be able to control page navigation from the buttons in the bottom right, again refreshing only the content within the main content section.

Thanks thus far :smile:

1 Like