Is it possible to configure a Shared Layout Animation at a more granular level?

[jimmy-guo]

I am currently using shared layout animations to animate between two separate component elements that share the same layoutId.

When a new component is added that has a layoutId prop that matches an existing component, it will automatically animate out from the old component [using CSS transforms].

This works as expected. However, I would like to control the transition for the transform more granularly, such as scale, x, and y separately. Specifically, I'd like to add a delay only to x.

<motion.div
  layoutId={'shared-element'}
  transition={{
      delay: 1, // this works for the entire layout animation
      x: {
        delay: 1 // this doesn't work for layout animations
      },
      scale: {
        delay: 1 // this doesn't work for layout animations
      }
  }}
>
   hello world
</motion.div>

Is this possible with motion? Or do I need to animate imperatively and calculate the values myself to do this?