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])