Wait for close animation to complete before open animation begins

[jon-w1]

When transitioning from screen A->B, we would like A to fully fade out before B begins to fade in. Is this possible?

I'm following the guide (for 5.x) from https://reactnavigation.org/docs/stack-navigator#animation-related-options but I can only get the screens to animate simultaneously. I would like B's animation to wait for A's animation to complete before starting.

const forFadeAndSlide = ({
  current,
  next,
  inverted,
  layouts: { screen },
}: StackCardInterpolationProps): StackCardInterpolatedStyle => {
  // range from 0-2
  // 0-1: new screen
  // 1-2: previous screen
  const progress = Animated.add(
    current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    }),
    next
      ? next.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
          extrapolate: 'clamp',
        })
      : 0
  );

  return {
    cardStyle: {
      transform: [
        {
          translateY: Animated.multiply(
            progress.interpolate({
              inputRange: [0, 1, 2],
              outputRange: [10, 0, 10],
              extrapolate: 'clamp',
            }),
            inverted
          ),
        },
      ],
      opacity: Animated.multiply(
        progress.interpolate({
          inputRange: [0, 1, 2],
          outputRange: [0, 1, 0],
          extrapolate: 'clamp',
        }),
        inverted
      ),
    },
  };
};

const transitionSpec: {
  open: TransitionSpec;
  close: TransitionSpec;
} = {
  open: {
    animation: 'timing',
    config: {
      duration: 225,
    },
  },
  close: {
    animation: 'timing',
    config: {
      duration: 225,
    },
  },
};