Scrolltrigger and jittery three.js camera animation

[sleekdigital]

I just saw  https://reflektor.digital/  as a recent showcase site for GSAP.  I also noticed how jittery the 3D elements are (easiest to see on the about page) on mobile (iphone 12).  I have run into the same issue and it is somewhat comforting to see it is not just me. I was wondering if anyone else here has had the issue and has a solution for it. 

 

Edit:

Here is a code sandbox illustrating the issue.  The jittering is not quite as bad as it is on the reflektor site, but still evident...

 

https://codesandbox.io/s/serene-glitter-25j39l?file=/src/App.js
https://25j39l.csb.app/

Edited November 11, 2023 by sleekdigital
Adding example

[GreenSock]

I'm not seeing any "jittering", but I have several recommendations for you: 

1. Use ctx.revert() in your cleanup function, not ctx.kill(). If you just kill() the context, it doesn't revert the values at all. And remember that React double-invokes useEffect()/useLayoutEffect() in React 18+
2. You're tying the camera.position.y to the progress of the ScrollTrigger which is totally dependent on the scroll position, but keep in mind that the browser's scroll position has a limited resolution. For example, if your page is sized such that there are 100 pixels total that it can scroll, the browser can only scroll one whole pixel at a time (no partial pixels), thus the smallest amount of change is gonna be 1/100 (0.01). Maybe that's what the "jitter" is for you - the low resolution of the amount of change(?). If I were you, I'd change the whole structure of how you're doing things - I'd use a simple tween with a ScrollTrigger that has a scrub set to a numeric value which smooths things out: 

React.useLayoutEffect(() => {
	const ctx = gsap.context(() => {
		gsap.fromTo(camera.position, {
			y: 0
		}, {
			y: -17,
			ease: "none",
			scrollTrigger: {
				start: 0,
				end: "max",
				scrub: 0.1
			}
		});
	});
	return () => ctx.revert();
}, []);

Change the scrub number to whatever you want - that's the amount of time it takes the tween's playhead to "catch up" to the scroll position. So this means things wouldn't jump by 0.01 increments like in my example earlier - it'd have a much higher resolution.

 

Does that help at all? 

[sleekdigital]

Thanks for the reply!  The idea makes sense but sadly that change seems even worse somehow.   You don't see any jittering on an iphone or similar mobile device?

[GreenSock]

I don't see any jittering whatsoever on the Reflektor site. I don't even see any on the Stackblitz link you provided (unless I scroll past the top because you didn't set overscroll-behavior: none, so the value flips negative). 

 

If it's only an issue on iPhones, have you tried setting ScrollTrigger.normalizeScroll(true); and/or ScrollTrigger.config({ ignoreMobileResize: true })? 

[sleekdigital]

I setup all three of those and it seems much improved.  Thanks for that! 

 

On the Reflektor site, the scrolling is plenty smooth while I'm touching the screen, but when I lift my touch... during the "inertia" of the scrolling, the 3D elements start jumping up and down.  Its very visible on the 3D shapes on the about page.

 

Edit:  Interesting... with all the suggested changes, my demo is the opposite. Very smooth during inertia, but a little jittery (but still better than before) while touch scrolling.

[GreenSock]

It's pretty tough to troubleshoot when I can't reproduce any of that, but another thing you could try is using ScrollSmoother with a very small "smooth" value for touch devices which basically forces all the scrolling to happen on the main thread and get smoothed only slightly (most people don't like a large smoothing amount on touch devices because it feels like it's lagging too far behind where their finger is). 

[sleekdigital]

That's weird that you can't reproduce it, I just tried another device (an iphone 14) and same result there both on the Reflektor site and my demo. Thanks for looking.

[Rodrigo]

Hi,

 

I see some jitter in the Reflektor site but only on a mid-range old android phone. But pretty much everything is a bit janky, not terrible though and I think this is mostly on the phone being a bit old and underpowered, nothing more. Granted the site is asking a bit from the CPU and the GPU and smaller/older phones don't have the best GPU's in the market so it kind of makes sense.

 

Happy Tweening!

[sleekdigital]

Thanks for looking.  I would be interested in what others are seeing on the specific devices I mentioned ... iphone 12 and 14.  I'm not sure I have seen anyone make this use case work very well on these devices so maybe they are underpowered for this?  The use case being, perfect synch of 3D with DOM elements while scrolling down the page.  Or maybe it is something about how these devices handle the inertia scrolling? 

[Rodrigo]

I looked on an 10th generation iPad on iOS 16 and a mid range motorolla phone.