I have a container with a mount animation and when set to beforeChildren. The child also has a mount animation.

Therefore, the mount animation of the child starts playing once the parent animation is over. However, the child component is mounted in the component tree at the same time the parent is.

This is a problem because I want to run some code exactly the moment the child's animation starts (in this case, play a sound).

Example code:

// parent.js
import { motion } from 'framer-motion';
import Child from './child';

export default function Parent() {
  const variants = {
    initial: {
      opacity: 0,
    },
    animate: {
      opacity: 1,
      transition: {
        duration: 1,
        when: 'beforeChildren'
      }
    }
  };

  return (
    <motion.div
      variants={variants}
      initial="initial"
      animate="animate"
    >
      <h1>Parent displayed!</h1>
      <Child/>
    </motion.div>
  );
}

// child.js
import { motion } from 'framer-motion';

export default function Child() {
  const variants = {
    initial: {
      opacity: 0,
    },
    animate: {
      opacity: 1,
      transition: {
        duration: 1,
      }
    }
  };

  return (
    <motion.div
      variants={variants}
    >
      <h1>Child displayed!</h1>
    </motion.div>
  );
}

Besides literally writing my own orchestration library, how do I run some code the moment the child's animation starts?