I have a component like this:

Column(
    verticalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxSize(),
) {
    Row { ... } // Always visible
    AnimatedVisibility(..., enter=fadeIn(), exit=fadeOut()) {
        Row { ... }  // appears on certain actions
    }
}

How do I make it so the first

Row

doesn't snap to the top when the bottom row becomes visible, but instead slowly slides to the new position? (and vice versa when the bottom becomes invisible again)

AnimatedVisibility

uses

enter: EnterTransition = fadeIn() + expandVertically(),
exit: ExitTransition = fadeOut() + shrinkVertically(),

which will animate the height of the content if visible or invisible, which in turn will smoothly slide the first row. If you are replacing the transition with a simple fade, then you are losing the smooth expand/shrink

If you need to account for the space AnimatedContent also may better serve your usecase