title: Cannot make a simple page transition work with Barba js in a WordPress site
body: <p>I’m developing a custom theme for WP and need to make page transitions similar to this website <a href="https://www.instrument.com/" rel="nofollow noreferrer">https://www.instrument.com/</a></p>
  <p><a href="https://barba.js.org/" rel="nofollow noreferrer">Barba.js</a> seems like a perfect solution for these purposes. However, the entire DOM tree always refreshes instead of just the content.</p>
  <p>Here is what I have:</p>
  <p><code>header.php</code></p>
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
      &lt;?php wp_head();?&gt;
    &lt;/head&gt;
    &lt;body data-barba=&quot;wrapper&quot;
      &lt;?php
        if ( get_field('is_dark_theme') ) {
          body_class( 'bg-dark text-light' );
        } else {
          body_class();
        }
        ?&gt;
    &gt;
  
    &lt;nav&gt;
      ...
    &lt;/nav&gt;
  
    &lt;main data-barba=&quot;container&quot; data-barba-namespace=&quot;home&quot;&gt;
  </code></pre>
  <p><code>footer.php</code></p>
  <pre><code>    &lt;/main&gt;
    &lt;/div&gt;
  
    &lt;?php wp_footer();?&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>In my main script file which is injected right before the closing of the body tag, I have the following:</p>
  <pre><code>(function () {
    barba.init({
      transitions: [{
        name: 'default-transition',
        leave() {
          console.log('leave');
        },
        enter() {
          console.log('enter');
        }
      }]
    });
  })();
  </code></pre>
  <p>When I click on the link in the navbar, there is a <code>leave</code> console output but then the entire page is loaded again as if Barba was never there. I never see <code>enter</code> output.</p>
  <p>Is it possible to use Barba with WP in the first place? If so, what am I doing wrong?</p>
  <p>I appreciate your help.</p>