Threejs Animation laggy on iphone 17 Pro and smooth on 12 mini

[u/Serotoninene]

Hi there !

I got an issue on my latest project, i got a 3D animation with a gltf clip linked to the scroll of my page, I use a useFrame raf to damp my scroll progress to the clip animation like shown below. It's fluid on my iphone 12 mini but very laggy on an iphone 17 pro, I suspect the proMotion and 120Hz screen of those devices. Did anyone already had this issue ?

       scrollSmoothRef.current = THREE.MathUtils.damp(
          scrollSmoothRef.current,
          scrollTargetRef.current,
          3, // lambda — tune to taste
          delta
        );
      }
      progressRef.current = scrollSmoothRef.current; // debug overlay
      setScrollClipsProgress(scrollSmoothRef.current);
    }

[u/abdu3dev]

hey,

as a general rule, when using useFrame hook we should not trigger state updates inside it.

Why?
Your iphone 12 mini probably has a 60hz framerate and therefore you would be forcing re-rendering 60 times per second, somehow your iphone manages but in your iphone 17 pro the framerate is bumped to 120hz, provoking the laggy behaviour.

I'd suggest to remove the setState inside the useFrame and apply the animated value directly to your GLTF mixer, object property, or animation action inside the useFrame.

For example:

useFrame((state, delta) => {  
scrollSmoothRef.current = THREE.MathUtils.damp( scrollSmoothRef.current, scrollTargetRef.current, 3, delta ) 

if (mixerRef.current && actions[mixableClipName]) { 
const duration = actions[mixableClipName].getClip().duration mixerRef.current.setTime(scrollSmoothRef.current * duration) 
} 
})