I’m working on a project where I’m switching between multiple animations (e.g., sitting, pointing, phone) based on scroll position. The animations are loaded using useFBX and applied to a model using useAnimations.
The issue I’m facing is that when I scroll the page, the current animation resets and starts playing again. This is causing bad user experience. I want my animation to keep playing continiuosely while I'm scrolling page. Here’s a simplified version of my code:
const { nodes, materials } = useGLTF('./models/developer.glb') as CustomGLTF;
const { animations: phoneAnimation } = useFBX('./models/phone.fbx');
const { animations: sittingAnimation } = useFBX('./models/sitting.fbx');
const { animations: pointingAnimation } = useFBX('./models/pointing.fbx');
phoneAnimation[0].name = 'phone';
sittingAnimation[0].name = 'sitting';
pointingAnimation[0].name = 'pointing';
const { actions } = useAnimations(
[phoneAnimation[0], sittingAnimation[0], pointingAnimation[0]],
group
);
const scrollOffset = useScrollAnimation();
const [currentAnimation, setCurrentAnimation] = useState<string>('sitting');
useEffect(() => {
if (scrollOffset < 0.45) {
setCurrentAnimation('sitting');
} else if (scrollOffset < 0.75) {
setCurrentAnimation('pointing');
} else {
setCurrentAnimation('phone');
}
}, [scrollOffset]);
useEffect(() => {
if (actions[currentAnimation]) {
actions[currentAnimation].play();
}
}, [currentAnimation, actions]);
I think the problem is that actions keep updating on every scroll, but when i remove it from dependencies array, the animations are not playing at all.
How can I prevent animations from resetting when scroll position changes?