How does AnimatedContent work in jetpack compose?

Question

I am working on a project on Android TV based on jetpack compose. I have treid to animate my UI using AnimatedVisibility but it naturally removes the content that I want to animate from the screen, which I don't want. I want to keep a part of the content still on screen. The followin is my code using AnimatedVisibility :

Column(){
    AnimatedVisibility(
        visible = !isClicked,
        enter = slideInVertically {
            with(density) { -50.dp.roundToPx()}
        } + fadeIn ( initialAlpha = 0.3f),
        exit = slideOutVertically {
            with(density) {-50.dp.roundToPx()}
        } + fadeOut( targetAlpha = 0.3f),
        modifier = Modifier.weight(0.50f)
    ){
        Column(){
            //Some code
        }
    }
    
    Column{
        //Some more code
    }
}

As suggested by the code, I want the 50.dp offset while animating to still show the botton 50.dp of my column inside the AnimatedVisibility block and not dissapear from the screen.

I have looked into AnimatedContent and looks like it can be used to solve this problem, but I can't understand how to adapt this code to AnimatedContent. Any help regarding this will be much appreciated!