Issue to use animation().pause() and animation().play() from useAnimate

[hadikman]

Hi
I don't know the usage of controller is correct or not, because it's not working.
I want when hover over each item the current width animation pause and when hover out continue the animation, also I couldn't use progressAnimation(progressScope.current).cancel() at async resetProgressBar(), so I reset the animation by width: '0%':

function Carousel() {
 // other codes
  const [progressScope, progressAnimation] = useAnimate()

   const progressBarController = {
    async startProgressBar() {
      await progressAnimation(
        progressScope.current,
        { width: '100%' },
        { duration: 3, ease: 'linear' },
      )
      await progressAnimation(
        progressScope.current,
        { width: '0%' },
        { duration: 0 },
      )
    },
    async resetProgressBar() {
      // progressAnimation(progressScope.current).cancel() not working, so I reset it by the value 
      await progressAnimation(
        progressScope.current,
        { width: '0%' },
        { duration: 0 },
      )
    },
  }

  React.useEffect(() => {
    // other code
      progressBarController.startProgressBar()
  }, [has dependency])

   // other code: use progressBarController.resetProgressBar() into next/previous carousel handler

  return (
    <div className="relative isolate grid h-36 w-sm overflow-hidden">
          <div className="z-0 grid h-36 w-sm overflow-hidden text-4xl font-bold text-slate-900 italic">
            {SLIDES.map((item, idx) => <motion.div
                  key={idx}
                 // other codes
                  onHoverStart={async () =>
                    progressAnimation(progressScope.current).pause() // Doesn't work
                  }
                  onHoverEnd={async () =>
                    progressAnimation(progressScope.current).play() // Doesn't work
                  }
                >
                  {item}
                </motion.div>}
          </div>

          <motion.div ref={progressScope}  initial={{ width: '0%' }} />
    </div>
  )
}

Thank you in advance

[MILLERMARRU]

The .pause() and .play() calls aren't working because progressAnimation(progressScope.current) on its own doesn't return animation playback controls, it's a call with no keyframes/options, so there's nothing to pause. animate.pause()/.play() only exist on the object returned by an actual animate(target, keyframes, options) call, that's the AnimationPlaybackControls, documented directly under the animate reference: pausing stops the animation at its current time, and playing resumes from that point (or restarts it if it had already finished).

So the animation you need to control is the one you already started with startProgressBar, you just need to hold onto its return value instead of calling progressAnimation again with just the scope:

const runningAnimation = useRef<ReturnType<typeof progressAnimation> | null>(null)

const progressBarController = {
  async startProgressBar() {
    const controls = progressAnimation(
      progressScope.current,
      { width: '100%' },
      { duration: 3, ease: 'linear' },
    )
    runningAnimation.current = controls
    await controls
    progressAnimation(progressScope.current, { width: '0%' }, { duration: 0 })
  },
  pause() {
    runningAnimation.current?.pause()
  },
  resume() {
    runningAnimation.current?.play()
  },
}

Call .pause()/.play() on runningAnimation.current from your hover handlers instead of re-invoking progressAnimation. For the reset case, calling a fresh progressAnimation(..., { width: '0%' }, { duration: 0 }) the way you're already doing is fine, since a zero-duration tween just snaps the value, there's no controls object worth keeping there.