GSAP target .letter not found Angular 17 after navigate to a different page?

[nwrz]

Hi Gsap team, I am new to angular and gsap, I have  created an animation where by scroll to the section the entire section will appear from bottom and while animation is started I am calling a function setAlertInterval(); which again calling a function  showAlert();  after each 3 seconds till now it's working perfectly good.

Now once I navigate to a different pages, I get "GSAP target .letter not found." and because of this when I come back to the page my animation also broken. I have tried all these steps to kill, referesh, clear or disable gsap in ngOnInit() and ngOnDestroy() but none of them works. It cause issue only animation which is inside the funtion showAlert(); remaining animation works fine and it gets refresh on ngOnInit();
 

// gsap.killTweensOf('*');

    // gsap.globalTimeline.clear();

    //ScrollTrigger.refresh(true);

// let triggers = ScrollTrigger.getAll();
    //  gsap.killTweensOf('*');
    // gsap.globalTimeline.clear();
    // triggers.forEach((trigger) => {
    //   trigger.disable();
    //   trigger.kill();
    // });

Gspa Version: "gsap": "^3.12.4",
Angular Version: "@angular/core": "^17.0.9",

Here is my code demo 
Thanks for your help.

See the Pen poYWLvj by Nawroz-the-vuer (@Nawroz-the-vuer) on CodePen

[Rodrigo]

Hi @nwrz and welcome to the GSAP Forums!

 

Sorry to hear about the troubles, but your demo is not working.

 

We highly recommend using Stackblitz for creating demos that include frameworks like Angular, Vue, Svelte, React, etc.

https://stackblitz.com/

 

Just select create a new project and in the frontend tab click on Angular:

 

Finally for what you describe the issue seems to stem from here:

setAlertInterval() {
  this.showAlert();

  setInterval(() => {
    this.showAlert();
  }, 3000); 
};

This interval will keep executing until you kill it using the clearInterval method:

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

 

So when you navigate to a different route that is still running and creating those GSAP instances, which are looking for elements that are not present in the DOM at that moment.

 

Finally for these frameworks we strongly recommend using GSAP Context:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Hopefully this helps.

Happy Tweening!

[nwrz]

Thanks @Rodrigo for your correct guide.

Yes the problem was not from Gsap, problem was from my setInterval() method  which I've never clear that and I also needed to stop the function execution after destroying my component, so here how added the condition.

 

 ngOnDestroy() {

    if (this.alertInterval) {

      clearInterval(this.alertInterval);

      this.isComponentDestroyed = true;

    }
}

  private alertInterval: any;

  isComponentDestroyed: boolean = false;

  setAlertInterval() {

    this.showAlert();

 

    this.alertInterval = setInterval(() => {

      this.showAlert();

    }, 3000);

  }

showAlert() {

    if (!this.isComponentDestroyed) {

   // the alert logic and gsap animation.

    }

  }

[nwrz]

...