I want to have a looping animation triggered by a previous animation. To trigger an animation after one ends, we can use usechain.
However, if I want one of the animations to loop, it just… doesn’t work.
Here’s the sample animation code:
const blueSpringRef = useSpringRef();
const pinkSpringRef = useSpringRef();
const [blueSpring, blueSpringAPI] = useSpring(
() => ({
ref: blueSpringRef,
from: { x: 0 },
to: { x: 100 },
config: { duration: 3000 },
}),
[]
);
const [pinkSpring, pinkSpringAPI] = useSprings(
2,
(i) => ({
ref: pinkSpringRef,
from: { y: 100 },
to: { y: 200 },
loop: true,
delay: 1000 * i,
}),
[]
);
useChain([blueSpringRef, pinkSpringRef], [0, 0.5], 3000);
Making the duration of useChain does not help.
Here’s a codesandbox:
https://codesandbox.io/p/sandbox/happy-fire-dpv9yf