Jump to content
Search Community

SPA GSAP animation not fired after navigating to another view

cecileRX test
Moderator Tag

Recommended Posts

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) => {
      if (e.currentTarget.matches("[data-link]")) {
        explode(6, 6);
        var target = e.currentTarget.href.baseVal;
        console.log("target", target);
        setTimeout(function () {
        }, 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) {

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 class='molecule-link' href="/" data-link>
<rect class="home-link" x="32" y="47" fill="white" opacity="0" width="40" height="42"></rect>


Link to comment
Share on other sites

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. 

Link to comment
Share on other sites



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!

Link to comment
Share on other sites

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) {
     } else if (newURL === devAboutPath) {
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...