aviolin Posted April 3 Share Posted April 3 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 3 Solution Share Posted April 3 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 1 Link to comment Share on other sites More sharing options...
aviolin Posted April 3 Author Share Posted April 3 Great, thanks for the speedy solution! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now