Adding or removing blocks in swup js

Question

I have made transitions between pages using swupJS. The footer is not in the swup container, so it is not reloaded. I also have a 404 page which has no footer.

The problem is that if the user goes to page 404 or to another page without a footer, it will still have the footer. But if you refresh the browser on the page 404, then the footer will not be, but when you go to another page with a footer, the footer will not be.

Is it possible to add and delete blocks in swup when you switch to a certain page? Or when transitioning from a certain page.

Including the footer in the swup container is not an option. Now I just removed the swup container on the 404 page, and when I go to the page I have the usual load. But I would like to have beautiful transitions throughout the site.

Answer 1

Option A: Dynamic containers

Swup v4 allows modifying the replaced containers on the fly. It'll look something like this, depending on your specific conditions:

swup.hooks.on('visit:start', (visit) => {
  if (shouldAddFooter || shouldRemoveFooter) {
    visit.containers = ['#content', '#footer'];
  } else {
    visit.containers = ['#content'];
  }
});

You'll need to make sure that every page always has those containers. They can be empty, but they can't be missing, otherwise swup will abort and force a browser reload.

Option B: Wrapper element

Assuming you have a content container that is always there, and a footer that might or might not be there, you could wrap both in a wrapper element that you can replace with swup:

<section id="#wrapper">
  <main id="#content">
    <!-- Main content -->
  </main>
  <footer id="#footer">
    <!-- Footer, might not be there -->
  </footer>
</section>

If you tell swup to only replace the outer #wrapper element, this should work whether the footer is there or not:

const swup = new Swup({ containers: ['#wrapper'] });