Basic setup for using Swup page transitions and GSAP in a Wordpress site

scripts.js

  $(function() {
    
    // Add your sites functions to under one main function names somwthing 
    // along the lines of:
    initMain();

    const options = [
      {
        from: '(.*)',
        to: '(.*)',
        in: function(next) {
          document.querySelector('#swup').style.opacity = 0;
          TweenLite.to(document.querySelector('#swup'), 0.5, {
            opacity: 1,
            onComplete: next
          });
        },
        out: (next) => {
          document.querySelector('#swup').style.opacity = 1;
          TweenLite.to(document.querySelector('#swup'), 0.5, {
            opacity: 0,
            onComplete: next
          });
        }
      }
    ];
    
    // List of needed Swup plugins
    const swup = new Swup({
      plugins: [
        new SwupJsPlugin(options),
        new SwupBodyClassPlugin(),
        new SwupHeadPlugin(),
        new SwupGaPlugin(),
      ]
    });

    swup.on('contentReplaced', function() {
      
      // Run sites main functions after transition
      initMain();

    });

    // ****** An example of how to access page content during transitions. Is
    // being used below to update the main nav to reflect current page ****** //

    // swup.on('transitionStart', function() {
    //   const oldMenuItem = $('.current-menu-item');
    //   oldMenuItem.removeClass('current-menu-item');
    // });
    // swup.on('popState', function() {
    //   const oldMenuItem = $('.current-menu-item');
    //   oldMenuItem.removeClass('current-menu-item');
    //   const page = swup.cache.getCurrentPage();
    //   const newMenuItem = $(page.originalContent).find('.current-menu-item').attr('id');
    //   $('#' + newMenuItem).addClass('current-menu-item');
    // });

    // swup.on('willReplaceContent', function() {
    //   const page = swup.cache.getCurrentPage();
    //   const newMenuItem = $(page.originalContent).find('.current-menu-item').attr('id');
    //   $('#' + newMenuItem).addClass('current-menu-item');
    // });
    
    // ******* Un-comment if you want Swup disabled on mobile devices ******* //

    // function checkWidth(x) {

    //   if (x.matches) { // If media query matches


    //   } else {

    //     swup.destroy();

    //   }

    // }

    // var x = window.matchMedia('(min-width: 768px)')
    // checkWidth(x) // Call listener function at run time
    // x.addListener(checkWidth) // Attach listener function on state changes

  });

Simple Swup-GSAP-Wordress example

Basic setup for using Swup page transitions and GSAP in a Wordpress site.

Notes (Will update as time goes on) :

1. Be sure that if you use ID's on elements there is only one throughout the site. 
Since there is no actual page load Chrome has issues determining that you are not 
using the same ID multiple times.