,Chain react-spring animations on hover - reactjs

Question

I'm trying to do a simple multi-step animation on react-spring: rotating an icon that goes to 10deg, then -10deg, and go back to 0deg. This animation will execute when the user hovers the icon.
The following snippet illustrates an animation with just the 1st step:
const [isBooped, setBooped] = useState(false);
const style = useSpring({
rotate: isBooped ? 10 : 0,
config: config.wobbly,
});
const onMouseEnter = useCallback(() => setBooped(true), []);
useEffect(() => {
if (!isBooped) {
return;
}
const timeoutId = window.setTimeout(() => {
setBooped(false);
}, 250);
return () => {
window.clearTimeout(timeoutId);
};
}, [isBooped]);
return (
<Button onMouseEnter={onMouseEnter}>
<Icon style={style} />
</Button>
);
I understand that to accepts an array to chain multiple animations like so:
to: [{ rotate: 10 }, { rotate: -10 }, { rotate: 0 }],
...but I do not know how to handle this along with the isBooped state.
Here's a sandbox with the code:
https://codesandbox.io/s/react-spring-test-o8fwm?file=/src/Notifications.js

Answer 1

This is a good opportunity to use the imperative API react-spring has to offer.
You can also cancel the animation mid flow if you want it to stop animating when someone is not hovering over the icon, or maybe it should just reset itself back to 0 cutting the animation short (this is commented out in the example provided below).
By passing a function to the useSpring hook you get an array where the first item is your styles and the second is the API. You can then use an effect to trigger the async animation to begin running. Here's your codesandbox modified to demonstrate this: https://codesandbox.io/s/react-spring-test-forked-ildtb?file=/src/Notifications.js