To bring this thread to an end. I made your code @Rodrigo to work with functional components without killing the tween on prop caused re-renders..
https://stackblitz.com/edit/gsap-react-stop-wheel-cl3pqo
In order to use dynamically updating props in the spinning Tween, I used React.useRef to save those values. Refs dont trigger rerender and therefor the tween won't be killed and reinitialized or something. They can be used in the useEffect hook without it running again.
React.useEffect(() => {
if (typeof stopAt !== "number") return;
stopAtRef.current = stopAt;
}, [stopAt]);
onComplete: () => {
console.log("onComplete", { stopAt, stopAtRef: stopAtRef.current });
// The stop position can be checked on every tween iteration without useEffect running again
if (loopIterationRef.current >= 2 && typeof stopAtRef.current === "number") {
spinTweenRef.current.timeScale(0);
gsap.to(wheelRef.current, {
rotation: `+=${stopAtRef.current + 360}`,
duration: (1.8 * (stopAtRef.current + 360)) / 360,
onComplete: () => {
setSpinning(false);
if (onStopSpinning) {
onStopSpinning();
}
},
});
} else {
loopIterationRef.current++;
spinTweenRef.current.play(0);
}
};
I really appreciate your help. This forum and gsap are just great.