Not working useMotionValueEvent with AnimationComplete

[Beaterie]

I have a component with the following script setup:

const x = useSpring( 0, { duration: 500 } )
useMotionValueEvent( x, 'animationComplete', () => console.log( 'animation completed' ) )
useMotionValueEvent( x, 'change', () => console.log( 'value changed' ) )

onMounted( () => {
  let timeout = setInterval( () => x.set( x.get() - 30 ), 2000 )
} )

The component looks like this:

<motion.div :style='{ x }'>
...  // children divs
</motion.div>

So, (in this simplified example) I want to shift a div every 2 seconds for 30px to the left and want to trigger later on stuff based on the complete status of the animation, before the animation again starts triggered by the setInterval function.

The component animates as expected, but while the change event fires, the animationComplete never occurs. Btw same behavior with animationStart and animationCancel.

Is this a bug or do I miss anything in the correct usage?

Thanks for your help in advance.

[rick-hup]

Thanks for reporting this.