search

barbajs / barba

Create badass, fluid and smooth transitions between your website’s pages
https://barba.js.org/
MIT License
11.52k stars 475 forks source link

Change the wrapper/container on the fly? #738

Open louiswalch opened 3 weeks ago

louiswalch commented 3 weeks ago

Is it possible to dynamically change the wrapper and container element when a link is clicked, to load a sub part of the page?

Back in v1 of Barba this was possible in the linkClicked hook and then resetting it after load is complete. But I can't figure out how to do it in v2. 

    Barba.Pjax.Dom.wrapperId        = name + '-wrapper';
    Barba.Pjax.Dom.containerClass   = name + '-container';

(If anyone stumbles on this, the code above is example of how it was done in v1, this isn't a v2 solution)

xavierfoucrier commented 3 weeks ago

Hello @louiswalch 👋

From what I know, I don't think it's possible.

If you want to load a subpart of a dedicated page, you should adapt your wrapper area, and just put inside it the part of the page you only want to load. Documentation says you can put the wrapper on the body tag, but you can also put it if you want on a child div as well.

Could you please explain with more details what you are trying to achieve? Thanks!

xavierfoucrier commented 2 weeks ago

Bump @louiswalch 👋

louiswalch commented 1 week ago

Apologies, to outline a scenario...

A website having a global navigation, where the body of the site has a fade transition. One area on that site (e.g. About) itself has a section navigation. When you're within that About section it would be nice to ONLY transition the actual page content and leave the section navigation visible.

This was possible in Barba V1 quite simply by changing the container/wrapper elements on the fly.