React cleanup issue

[IvanSmiths]

Hi all!

I am running in a problem with this animation (Stackbliz), an infinite looping horizontal section with a snapping functionality (which is causing the problem). The animation looks working properly, but as soon as I change page (by clicking in one of the images) I run into a scroll issue. When I am in the new page, if I scroll for a bit and then stop scrolling, the page get scrolled to the top.

 

The issue is inside this part of code. Looks like this function is running even when the component is not rendered anymore:

ScrollTrigger.refresh()
ScrollTrigger.addEventListener("scrollEnd", () => scrollToOffset(scrub.vars.offset));

function scrollToOffset(offset) {
    let snappedTime = snapTime(offset),
        progress = (snappedTime - seamlessLoop.duration() * iteration) / seamlessLoop.duration(),
        scroll = progressToScroll(progress);
    if (progress >= 1 || progress < 0) {
        return wrap(Math.floor(progress), scroll);
    }
    trigger.scroll(scroll);
}

Can be that gsap.context is not able to cleanup properly this part of code? I am cleaning up like this:

return () => {
    ctx.revert();
    ScrollTrigger.getAll().forEach(t => t.kill());
}

Thanks in advance!

[GreenSock]

I don't have much time to dig into this right now, but it looks to me like you never cleaned up this event listener: 

ScrollTrigger.addEventListener('scrollEnd', () => scrollToOffset(scrub.vars.offset));

So that's still firing on your other page. You should clean that up in your React cleanup function (or your gsap.context() one, either way). 

 

https://stackblitz.com/edit/stackblitz-starters-qxh7ya?file=pages%2Findex.js

 

Does that clear things up? 

[IvanSmiths]

Hey, thank you so much for your answer! This solved the issue!
But I noticed something really strange on my local project, that for some reasons doesn’t happen in the stackblitz example. When i click on the image and change page, I land on a page not in the very top, but with a scrolled amount of pixels and sometimes I get this long console error pointing to line 108:

seamlessLoop.time(wrapTime(playhead.offset));

I'll try to reproduce this bug in the Stackblitz example , but thank you already, the main issue is solved! Probably this issue is due to something else on my codebase

overrideMethod	@	console.js:213
	_warn	@	gsap-core.js:92
	eval	@	gsap-core.js:673
	toArray	@	gsap-core.js:667
	Tween	@	gsap-core.js:3197
	set	@	gsap-core.js:3646
	_initTween	@	gsap-core.js:2929
	_attemptInitTween	@	gsap-core.js:444
	render	@	gsap-core.js:3412
	render	@	gsap-core.js:2257
	render	@	gsap-core.js:2257
	_lazySafeRender	@	gsap-core.js:192
	totalTime	@	gsap-core.js:1727
	totalTime	@	gsap-core.js:2432
	time	@	gsap-core.js:1736
	_setterFunc	@	gsap-core.js:3692
	_renderPlain	@	gsap-core.js:3704
	render	@	gsap-core.js:3456
	render	@	gsap-core.js:2257
	_lazySafeRender	@	gsap-core.js:192
	totalTime	@	gsap-core.js:1727
	totalTime	@	gsap-core.js:2432
	time	@	gsap-core.js:1736
	onUpdate	@	HomeWorks.js:108
	_callback	@	gsap-core.js:990
	render	@	gsap-core.js:3465
	render	@	gsap-core.js:2257
	_lazySafeRender	@	gsap-core.js:192
	updateRoot	@	gsap-core.js:2695
	_tick	@	gsap-core.js:1315
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	requestAnimationFrame (async)
	_tick	@	gsap-core.js:1310
	Show less

 

[GreenSock]

It's tough to troubleshoot blind, but I think there's something else going on there (unrelated to GSAP) because your call stack mentions an "eval()" method which is NOT anywhere in GSAP. Feel free to search the source code. So I wonder if you've got some kind of build tool that's injecting something weird that's causing problems. I'm totally guessing. 🤷‍♂️