SPA GSAP animation not fired after navigating to another view

[cecileRX]

I am building a vanilla JS SPA where the nav links are on a svg image in the Homeview. They are working well the first time when clicked but after navigating to another view, the prevent default behavior is ignored and the animation is not fired . There is no error in the console so it's kind of hard to debug. Any Idea?

I can't make a codepen as it's several files, but I have a<div id = "app"></div>  on the index.html file  where the html of the views is inserted dynamically, and here is the code of the index .js:

document.addEventListener("DOMContentLoaded", function (event) {
  if (location.pathname === "/") {
    document.querySelector(".about-link").addEventListener("click", (e) => {
      console.log(e);
      if (e.currentTarget.matches("[data-link]")) {
        e.preventDefault();
        explode(6, 6);
        var target = e.currentTarget.href.baseVal;
        console.log("target", target);
        setTimeout(function () {
          navigateTo(target);
        }, 2000);
        const textLinks = document.querySelectorAll("text");
        gsap.to(textLinks, {
          duration: 2,
          opacity: 0
        });
      }
    });
  }
});

 

and the Homeview.js

import AbstractView from "./AbstractView.js";

export default class extends AbstractView {
constructor(params) {
super(params);
this.setTitle("Home");
}

async getHtml() {
return `
<div class="main-container">

<div id="molecule">

<svg version="1.1" id="calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 120.05 131.14" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<a class='molecule-link about-link' href="/about" data-link>
<rect id="about-link" x="3" y="5" fill="#fff" opacity="0" width="30" height="30"></rect>
<text x="35" y="20" font-family="Inter" opacity="100" font-size="0.2rem" fill="#28ABE2">About</text>
</a>
<a class='molecule-link' href="/" data-link>
<rect class="home-link" x="32" y="47" fill="white" opacity="0" width="40" height="42"></rect>
</a>
</svg>

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple demo that demonstrates the issue? 

 

As you need page transitions, you may find StackBlitz helpful - We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi,

 

The problem could stem from this:

if (location.pathname === "/") {
  /* all your code is in here */
}

All your code is contained inside that conditional block, including the prevent default method, so if the current path is not the root one nothing inside that block will be executed.

 

If you keep having issues remember to include a minimal demo.

Happy Tweening!

[cecileRX]

Hello Rodrigo and thanks for your answer. Finally I found out that it was not a greensock problem. I had to check the URL change to trigger the animations when changing views. For those who have the same problem, I found this solution, which is not very elegant but works:

function checkURLchange() {
  var newURL = window.location.href
  if (newURL != oldURL) {
    oldURL = newURL;
    setInterval(checkURLchange, 0);
 	 if (newURL === devHomePath) {
        animHome();
        animLinksHome();
     } else if (newURL === devAboutPath) {
        animAbout();
    }
  }
}