[FEATURE] Way to override parent variant's transition properties within staggered children

[schardev]

Is your feature request related to a problem? Please describe.

Kinda. I want to override parent transition delay within one of the staggered children before continuing the rest of the animation.

For example, I have something like this:

import { motion } from "framer-motion";

const opacityVariant = {
  hide: {
    opacity: 0
  },
  show: {
    opacity: 1,
    transition: {
      duration: 1
    }
  }
};

export default function App() {
  return (
    <motion.div initial="hide" animate="show" transition={{ staggerChildren: 0.5 }}>
      <motion.p variants={opacityVariant}>Item 1</motion.p>
      <motion.p variants={opacityVariant}>Item 2</motion.p>
      {/* This doesn't work */}
      <motion.p variants={opacityVariant} transition={{ delay: 3 }}>Item 3</motion.p>
      <motion.p variants={opacityVariant}>Item 5</motion.p>
      <motion.p variants={opacityVariant}>Item 6</motion.p>
    </motion.div>
  );
}

Now, I want to wait at Item 3 for 3 sec before continuing the rest of the animation. Currently, the delay doesn't take effect and the animation continues as if it was never defined. I assume it's because the variant has a higher priority.

Describe the solution you'd like

Maybe increase the priority of the children's transition prop.

Describe alternatives you've considered

Since I don't want to define them again inline, the only workaround I think of is to redefine the initial and animate props with their dedicated transition prop as a parent component of the component I want to delay the transition of, like this:

<motion.p initial="hide" animate="show" transition={{ delayChildren: 3 }}>
  <motion.p variants={opacityVariant}>Item 3</motion.p>
</motion.p>

Additional context

Repro link: https://codesandbox.io/s/clever-rhodes-43sm35

I may be missing something here so please let me know if there's a better way of achieving the same thing.

Note
I know I could orchestrate using the animate function from useAnimate but I'd like it if there's a declarative way of doing it.

[schardev]

One solution I found is to pass the delay to custom prop of the motion component and use that to adjust the delay inside the variant definition itself. Something like:

import { motion } from "framer-motion";

const opacityVariant = {
  hide: {
    opacity: 0
  },
  show:(delay) => {
    const transition = {duration: 1};

    if (delay) transition.delay = delay;

    return {
      opacity: 1,
      transition,
    }
  }
};

export default function App() {
  return (
    <motion.div initial="hide" animate="show" transition={{ staggerChildren: 0.5 }}>
      <motion.p variants={opacityVariant}>Item 1</motion.p>
      <motion.p variants={opacityVariant}>Item 2</motion.p>
      {/* This works */}
      <motion.p custom={3} variants={opacityVariant}>Item 3</motion.p>
      <motion.p variants={opacityVariant}>Item 5</motion.p>
      <motion.p variants={opacityVariant}>Item 6</motion.p>
    </motion.div>
  );
}

While this works as expected, it fails pretty quickly if there are multiple child within the delayed item. Like this:

{/* This doesn't works */}
<motion.p custom={3} variants={opacityVariant}>
  <motion.p variants={opacityVariant}>Item 3.1</motion.p>
  <motion.p variants={opacityVariant}>Item 3.2</motion.p>
</motion.p>

The staggering will have no effect here.

For now, the custom delay value method works for me but I'd still be interested in seeing a dedicated prop for manipulating parent variants' transition property.

[mattgperry]

I think for more complicated animation sequences like this it's better to use useAnimate. Setting as a wontfix as this is unlikely to be implemented.