How to stop a looped animation after a complete cycle

[hadikman]

Hi
I want to stop an animation with loop: true after meet a falsy condition. I don't want to make it stop immediately, it must stop after the animation do a complete cycle.
How can I achieve this?

Thank you

[hadikman]

I came up with this solution with useSprings (it probably works with useSpring too):

const SQUARES = Array.from({ length: 2 }, (_, i) => i) const squareRef = useSpringRef() const squareStyles = useSprings(4, SQUARES.map(id => ({ ref: squareRef, from: { ... }, to: { ... }, loop: true, // must be true })), ) React.useEffect(() => { if (isAnimate) { squareRef.start() } else { squareRef.start({ to: { ... }}) // important: the to object must be exactly the same as the to object in useSprings } }, [squareRef, isAnimate])