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

[harshagarwalnyu]

The useSpring declarative style (passing values directly) doesn't lend itself well to repeated triggers - use the imperative API form instead, which gives you an api object to call start on:

import { useEffect } from 'react'
import { useSpring, animated } from '@react-spring/web'

function PulsingBox() {
  const [springs, api] = useSpring(() => ({
    scale: 1,
    config: { tension: 300, friction: 10 },
  }))

  useEffect(() => {
    const runAnimation = () => {
      api.start({
        to: async (next) => {
          await next({ scale: 1.2 })
          await next({ scale: 1 })
        },
      })
    }

    runAnimation() // run immediately
    const id = setInterval(runAnimation, 10_000)
    return () => clearInterval(id)
  }, [api])

  return <animated.div style={{ transform: springs.scale.to(s => `scale(${s})`) }} />
}

The to: async (next) => { ... } pattern lets you sequence animation steps. The api ref is stable across renders so it's safe in the useEffect dependency array.

If you want a simpler in-out pulse without sequencing:

useEffect(() => {
  const id = setInterval(() => {
    api.start({ scale: 1.2, onRest: () => api.start({ scale: 1 }) })
  }, 10_000)
  return () => clearInterval(id)
}, [api])

onRest fires when the first animation completes, which is a clean way to chain two states without needing the async to form.