How to use swup - 3 common examples

function swupInit() {
  // currently these are run by css only. Must add js-plugin for more advanced transitions
  const swup = new Swup({
    plugins: [new SwupPreloadPlugin(), new SwupGaPlugin()],
  });

  swup.on('contentReplaced', () => {
    // insert any scripts here that break after page transitions or use the Head plugin from Swup
    init();
  });
}

module.exports = function (page, popstate) {
    document.documentElement.classList.remove('is-leaving')

    // replace state in case the url was redirected
    let link = new Link()
    link.setPath(page.responseURL)

    if (window.location.pathname !== link.getPath()) {
        window.history.replaceState({
                url: link.getPath(),
                random: Math.random(),
                source: "swup",
            },
            document.title,
            link.getPath(),
        );
    }

    if (!popstate || this.options.animateHistoryBrowsing) {
        document.documentElement.classList.add('is-rendering')
    }

}
      )
      if (!navActivated) {
        const button = event.currentTarget
        toggleMenuIcon(button)
        navActivated = true;
        setTimeout(() => { toggleMenuIcon(button); navActivated = false }, 6000)
      }
    })
  } else {
    mainEl = "#swup"
    containers = [mainEl, "#topnav"]
  }

  if(!window.matchMedia('(prefers-reduced-motion)').matches) {
    const swup = new Swup({
      containers: containers,
      plugins: [
        new SwupSlideTheme({mainElement: mainEl}),
        new SwupBodyClassPlugin(),
        new SwupScrollPlugin({animateScroll: false})
      ],

    })

    swup.on('contentReplaced', function() {
      addHeadingAnchors()
    })
  }

  addHeadingAnchors()
})