How to make a looping animation with react-spring useChain

Question

I wanted to crate a looping animation for loading using react-spring , but when I use loop it get the timing wrong and I do not know how to make useChain animation loop.

const animation = {
  from: { scale: 0, opacity: 0, background: 'red' },
  to: [
    { scale: 1, opacity: 1 },
    { scale: 0, opacity: 0 }
  ],
  config: {
    duration: 500
  }
}

const Loading = () => {
  const leftBottomRef = useSpringRef()
  const leftBottom = useSpring({
    ref: leftBottomRef,
    ...animation
  })

  const leftTwoRef = useSpringRef()
  const leftTwo = useSpring({
    ref: leftTwoRef,
    ...animation
  })

  const centerRef = useSpringRef()
  const center = useSpring({
    ref: centerRef,
    ...animation
  })

  const rightTwoRef = useSpringRef()
  const rightTwo = useSpring({
    ref: rightTwoRef,
    ...animation
  })

  const rightTopRef = useSpringRef()
  const rightTop = useSpring({
    ref: rightTopRef,
    ...animation
  })

  useChain(
    [leftBottomRef, leftTwoRef, centerRef, rightTwoRef, rightTopRef],
    [0, 0.3, 0.6, 0.9, 1.2],

  )

  return (
    <div className='loading'>
      <div className='loader'>
        <animated.div style={center} />
        <animated.div style={rightTwo} />
        <animated.div style={rightTop} />
        <animated.div style={leftTwo} />
        <animated.div style={center} />
        <animated.div style={rightTwo} />
        <animated.div style={leftBottom} />
        <animated.div style={leftTwo} />
        <animated.div style={center} />
      </div>
      loading...
    </div>
  )
}

If there is a way to make useChain loop or is there another way to achieve this animation ?

here is some context for what i am trying to do

Answer 1

did you try adding loop: true to your animation object or the config within that like they have in the docs?