[FR] Containers selector per animation

[pixelmachine]

It would be great within the context of this plugin to be able to replace the content of a specific container rather than all of them. E.g. :

const transitions = [
  {
    from: '(.*)',
    to: '/tab',
    // Define one or more of the containers already defined in the main 
    // Swup instance. Only the content of this container will be loaded.
    containers: ['#tabs'], 
    out: ( next ) => {
      // Do 'out' animation on '#tabs' and replace the content of 
      // that container only. The '#swup' container is not loaded.
      next();
    }.
    in: ( next ) => {
      // Do 'in' animation.
      next();
    }
  }
]

const swup = new Swup(
  {
    containers: ["#swup", "#tabs"],
    plugins: [
      new SwupJsPlugin(transitions),
    ]
  }
);

This would allow much more powerful content manipulation and animations. For example you could load the content of just an overlay without replacing the primary content.

[gmrchk]

Hi, unfortunately, that's not how swup works. Swup always keeps the content of the page consistent with the actual content of the page that would be loaded (at least when it comes to the content of the swup containers, which should realistically wrap anything changing between pages). Replacing different number of containers would go against this idea.

You can still replace only an overlay, only on other pages, the overlay would just be an empty element. All the other containers would be replaced too, but without any animation running on them, it would seem like nothing happened to the user.

[pixelmachine]

Hi, unfortunately, that's not how swup works.

Yep, agreed but that's why I said in the context of the JS plugin. It wouldn't make sense outside of it but in the plugin it would add a huge amount of extra power and flexibility.

You can still replace only an overlay, only on other pages, the overlay would just be an empty element.

Yeah that's exactly how I'm doing it. There are two issues though:

The first is, what gets loaded in the main container when you open an overlay? It's problematic if you don't want it to be empty (if it's partially visible behind the overlay or visible during the transition), it will need to be based on which page you come from.

The second issue is that because all the containers are replaced at once it's quite difficult to do a complex, seamless transition where different containers are animated separately. For example I might want to replace the content behind my overlay before closing the overlay and making the overlay empty.

Anyway, nice work on Swup it's really thoughtfully designed, I really enjoyed working with it.