How to use swup - 3 common examples

To help you get started, we’ve selected a few swup examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Lightmatter / generic-django-conf / {{cookiecutter.repo_name}} / {{cookiecutter.repo_name}} / static_source / js / main.js View on Github external
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();
  });
}
github swup / swupjs / src / modules / renderPage.js View on Github external
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')
    }
github bridgetownrb / bridgetown / bridgetown-website / frontend / javascript / index.js View on Github external
}
      )
      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()
})

swup

Complete, flexible, extensible and easy to use page transition library for your web.

MIT
Latest version published 3 months ago

Package Health Score

80 / 100
Full package analysis

Popular swup functions