Play animation every n seconds

[romankoho]

I'm trying to run an animation every 10 seconds. The code below doesn't work at all. I had a state where the animations would run when first mounting the component. However, when I navigated to a different page and then back to the one with the animated div, it wasn't started either.

  const api = useSpringRef()
  const springs = useSpring({
    ref: api,
    from: {
      scale: 1,
      background: '#390f1c'
    },
    to: async (next) => {
      await next({ scale: 1.2, background: '#e71354' })
      await next({ scale: 1, background: '#390f1c' })
      await next({ scale: 1.2, background: '#e71354' })
      await next({ scale: 1, background: '#390f1c' })
      await next({ scale: 1.2, background: '#e71354' })
      await next({ scale: 1, background: '#390f1c' })
    },
    config: { easing: easings.linear }
  })

  useEffect(() => {
    if (!api) {
      return
    }

    function animate() {
      api.start({ reset: true })
    }

    const interval = setInterval(() => {
      console.log('animate')
      animate()
    }, 10_000)

    animate()

    return () => clearInterval(interval)
  }, [api])
  
  return (
       <> 
          <animated.div
                style={{ ...springs }}
                className={
                  'transition-transform text-white shrink-0 flex gap-1 items-center border-[1px] border-dark-pink rounded-md py-2 px-3'
                }
              >
                {t('demo-mode.title')}
           </animated.div></>
    )