GSAP .kill() doesn't stop ScrollTrigger onUpdate() from running

[aviolin]

I'm a little confused about how to prevent a memory leak in a SPA I'm working on. I need to be able to fully kill all tweens on route changes, however even when I kill them, it seems like they are still updating. I've created a minimal demo here:

 

gsap.registerPlugin([ScrollTrigger])

const tween = gsap.to('.box', {
  scrollTrigger: {
    trigger: '.box',
    start: 'top bottom',
    end: 'bottom top',
    onUpdate: () => {
      console.log('update:', Date.now())
    }
  },
  x: window.innerWidth - 200,
})

document.querySelector('button').addEventListener('click', () => {
  console.log('kill')
  tween.kill();
})

 

If you hit the kill button before scrolling, the tween never happens and onUpdate never runs (as expected). But if you scroll, let the tween finish, then hit the kill button, scrolling around still runs the onUpdate function, as you can see in the console.

 

Is there any way to fully kill a tween, including its onUpdate function?

See the Pen BaEJPKy?editors=1111 by aviolin (@aviolin) on CodePen

[GreenSock]

Great catch, @aviolin. Sorry about any confusion there - it should be resolved in the next release which you can preview at: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

As a workaround, you can just add this: 

tween.scrollTrigger && tween.scrollTrigger.kill();

See the Pen zYXpmBB?editors=0010 by GreenSock (@GreenSock) on CodePen

[aviolin]

Great, thanks for the speedy solution!