Animation for in and out of the translated text

TextRecognitionComposable.kt

@Composable
fun BindTextRecognitionOutput(
    textRecognitionViewModel: TextRecognitionViewModel,
    textTranslationViewModel: TextTranslationViewModel,
    listener: TextRecognitionComposableInterface
) {
    //animation based on this value: if the translation is ready, show up it and hide the language choice and viceversa
    val showTranslation = remember { textTranslationViewModel.showTranslation }

    ConstraintLayout(Modifier.fillMaxSize()) {
        val (title,
            text,
            backToCameraButton,
            transButton,
            progress,
            transLangBox) = createRefs()
        val textValue by textRecognitionViewModel.getOutput().observeAsState()
        val languages by textTranslationViewModel.supportedLanguages.observeAsState()
        val translation by textTranslationViewModel.getOutput().observeAsState()
        val scrollState = rememberScrollState(0)
        val transScrollState = rememberScrollState(0)
       
       //several UI components
       ...

        //
        Button(modifier = Modifier.constrainAs(transButton) {
            bottom.linkTo(text.top, margin = (-20).dp)
            end.linkTo(parent.end, margin = 18.dp)
            width = Dimension.preferredWrapContent
            height = Dimension.preferredWrapContent
        }, onClick = {
            textTranslationViewModel.loadSupportedLanguages()
        })
        {
            Text(
                text = stringResource(R.string.translate_button)
            )
        }

        ...

        {
            Box(
                modifier = Modifier
                    .background(
                        colorResource(id = R.color.purple_500),
                        shape = RoundedCornerShape(8.dp)
                    )
                    .then(Modifier.padding(16.dp)),
                contentAlignment = Alignment.Center
            ) {
                AnimatedVisibility(
                    visible = !showTranslation.value,
                    enter = fadeIn(
                        initialAlpha = 0.0f,
                        animationSpec = tween(durationMillis = 500)
                    ),
                    exit = fadeOut(
                        targetAlpha = 0.0f,
                        animationSpec = tween(durationMillis = 500)
                    )
                ) {
                    LazyColumn(
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.spacedBy(8.dp)
                    ) {
                        languages?.let { list ->
                            items(list.toList(), key = {
                                it
                            }) { lang ->
                                BuildTransLangCard(lang = lang, listener = listener)
                            }
                        }
                    }
                }
                AnimatedVisibility(
                    visible = showTranslation.value,
                    enter = fadeIn(
                        initialAlpha = 0.0f,
                        animationSpec = tween(durationMillis = 500)
                    ),
                    exit = fadeOut(
                        targetAlpha = 0.0f,
                        animationSpec = tween(durationMillis = 500)
                    )
                ) {
                    Text(
                        text = translation ?: "",
                        modifier = Modifier
                            .verticalScroll(transScrollState)
                            .fillMaxSize()
                            .padding(16.dp),
                        fontSize = 20.sp,
                        color = Color.White
                    )
                }
            }
    }