Pjax navigation old tween objects and callbacks remain after page change

[LPIP]

Hi I am working on a project that uses Pjax for seamless page navigation, its html5 pushstate based page navigation. The whole page isn't reloaded but content container is removed and replaced on each page change. I have also been using GSAP and ScrollTrigger on this with callbacks on functions. Basically my problem is that when I change page the ScrollTrigger triggers and GSAP tweens and callbacks seem to remain in place and cause null content warnings and other errors on my site such as not being able to repeat the same animation on multiple pages. 

 
Here is a basic example of the type of thing it is doing, its not that important what I am doing , I have a whole bunch of slides on the page doing stuff and it works. Basically each time the page changes the javascript to initialise the gsap should be destroyed and completely redone . As in I am writing over the same vars each time and the old introSlider, intro, slides, progressMeter etc should be completely refreshed each page. 

 

let introSlider = () => {

  let intro = document.querySelector('.intro-slider');
  let slides = intro.querySelectorAll('.slide');

  let progressMeter = intro.querySelector('.slide-progress-meter');

  for (let i=0; i < slides.length; i++) {
    let slide = slides[i];
    let index = i;

    var tween = gsap.fromTo(slide, {
      autoAlpha: '0',
    },
      {
        autoAlpha: '1',
        scrollTrigger: {
          scrub: true,
          pin: false,
          start: 'top top',
          end: window.innerHeight * index,
        },
      });

    var tweeen = gsap.to('.slide-progress-meter', {
      scrollTrigger: {
        scrub: true,
        pin: false,
        start: 'top top',
        end: window.innerHeight * index,
      },
      strokeDasharray: '100, 100',
      ease: 'none',
      onStart: () => {
        progressMeter.innerHTML = index+1;
      },
      onReverseComplete: () => {
        progressMeter.innerHTML = index;
      },
    });
  }
}

// do introSlider
introSlider();

 

// triggered on page change send
document.addEventListener('pjax:send', () => {
    gsap.killTweensOf('*');
});

 

There is a function called before the page changes which is the perfect time to remove old functions. I have tried Kill tweens of * but it messes everything up , and seems to prevent any future tweens from happening that use the same functions. its weird if I do var tween = gsap ... then later on page change if I do console.log(tweeen); it shows the tween object but if I do tweeen.clear();  it causes an error. 

 

basically my question is how do I kill all tweens and callbacks on page change , so that the same functions can be reused on next pages but are completely unrelated to each other. I hope its a simple fix , cheers,

[ZachSaucier]

Hey LPIP.

 

How to get rid of everything depends on how you want to do it. Do you want tweens and timelines to go to their starting state or their beginning state? Or whatever state that they are when the page is transitioned? 

 

And are you going to recreate all GSAP parts, even those that otherwise would be shared between pages? Or are you hoping to let some keep running if they're not part of the page's content that's being changed?