title: JavaScript file doesn't load after page transition with barba.js
body: <p>I have a website with a link. When I click the link I want a smooth page transition to the next page using jQuery. I got the the HTML elements inside the barba DOM to fade out. But when the next page tries to load, all BUT the JavaScript loads.</p>
  
  <p>This is my code:
  (index.html)</p>
  
  <pre><code>   &lt;div id="barba-wrapper" class="wrapper"&gt;
      &lt;div class="barba-container"&gt;
          &lt;div class="container"&gt;
              &lt;span class="text1"&gt;Hey There!&lt;/span&gt;
              &lt;span class="text2"&gt;This is my portfolio!&lt;/span&gt;
              &lt;a id="homeLink" href="./home.html"&gt;Click me to continue&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('document').ready(function(){
          var transEffect = Barba.BaseTransition.extend({
              start: function(){
                this.newContainerLoading.then(val =&gt; this.fadeInNewcontent($(this.newContainer)));
              },
              fadeInNewcontent: function(nc) {
                nc.hide();
                console.log('stuff should be hidden');
                var $el = $(this.newContainer);
                var _this = this;
                $(this.oldContainer).fadeOut(1000).promise().done(() =&gt; {
                  nc.css('visibility', 'visible');
                  nc.fadeIn(1000, function(){
                  console.log('new content should fade in.');
                  _this.done();
                  })
                });
              }
          });
          Barba.Pjax.getTransition = function() {
            return transEffect;
          }
          Barba.Pjax.start();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I can see the the console logs in the console but JavaScript doesn't load.</p>
  
  <p>This is the page I'm trying to load:
  (home.html)</p>
  
  <pre><code>&lt;div id="barba-wrapper" class="wrapper"&gt;
      &lt;div class="barba-container"&gt;
          &lt;canvas&gt;&lt;/canvas&gt;
          &lt;script src="canvas.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I get no errors whatsoever.
  Also I have seen a question on here with the same problem as mine, but it was very unclear. (and does not have any answers so far)
  Thanks!</p>