Interface AnimationLifecycles

Callback when animation defined in animate is complete.

The provided callback will be called with the triggering animation definition. If this is a variant, it'll be the variant name, and if a target object then it'll be the target object.

This way, it's possible to figure out which animation has completed.

function onComplete() {
  console.log("Animation completed")
}

<motion.div
  animate={{ x: 100 }}
  onAnimationComplete={definition => {
    console.log('Completed animating', definition)
  }}
/>
Copy

Callback when animation defined in animate begins.

The provided callback will be called with the triggering animation definition. If this is a variant, it'll be the variant name, and if a target object then it'll be the target object.

This way, it's possible to figure out which animation has started.

function onStart() {
  console.log("Animation started")
}

<motion.div animate={{ x: 100 }} onAnimationStart={onStart} />
Copy

Callback with latest motion values, fired max once per frame.

function onUpdate(latest) {
  console.log(latest.x, latest.opacity)
}

<motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />
Copy