How to make transition animation from one Component to another (Jetpack Compose)?

I have a Column with scroll, and when the user scrolls down, the toolbar appears otherwise disappearing. The toolbar has a text, and the current implementation works by changing the alpha of the toolbar, so the text on this toolbar appears with the toolbar itself by changing the alpha, however, what I need to achieve is to translate the text from the content of Column to the Toolbar, in other words, I have a text on the middle of the screen and once a user starts to scroll down toolbar should appear and text should be slightly translated from the middle of the view to the toolbar.

My current implementation is:

package com.example.translationanim

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.translationanim.ui.theme.TranslationAnimTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TranslationAnimTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    TransactionToolbar()
                }
            }
        }
    }
}

@Composable
fun TransactionToolbar() {
    val scrollState: ScrollState = rememberScrollState()

    Box {
        val screenHeight =
            with(LocalDensity.current) { LocalConfiguration.current.screenHeightDp.dp.roundToPx() }
        val ratio: Float = scrollState.value.toFloat() / screenHeight;

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .verticalScroll(scrollState),
        ) {
            Surface(
                modifier = Modifier
                    .height(300.dp)
                    .fillMaxWidth()
                    .padding(5.dp),
                color = Color.Magenta
            ) {}

            Spacer(modifier = Modifier.height(30.dp))

            Text(
                text = "THIS TEXT SHOULD BE TRANSLATED",
                color = Color.Red
            )

            Spacer(modifier = Modifier.height(30.dp))

            Column {
                repeat(200) {
                    Text(
                        text = "Test data so the page can be scrolled",
                        color = Color.LightGray
                    )
                }
            }
        }

        val value: Float = (ratio * 5f) - 1f /*delay*/
        val minVal: Float = java.lang.Float.min(1f, value)

        var isHeaderVisible: Boolean by remember { mutableStateOf(false) }
        isHeaderVisible = scrollState.value > 500 /*When header came to visible*/

        if (isHeaderVisible) {
            ToolBar(
                modifier = Modifier
                    .graphicsLayer {
                        alpha = minVal
                    },
                headerTitle = "Text should be translated here"
            )
        }
    }
}

@Composable
fun ToolBar(
    modifier: Modifier = Modifier,
    headerTitle: String
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Color.Blue)
    ) {
        Text(
            modifier = Modifier.padding(end = 8.dp),
            text = headerTitle,
            color = Color.Green,
        )
    }
}

it looks like this in its initial state:

https://drive.google.com/file/d/1YdcswPFCtBksLTF0f-8uS3Ef_4TVMrak/view?usp=sharing

and after a user scrolled down:

https://drive.google.com/file/d/1x0-w6cYXGZ-J-8iouzQeN-FoRx07Nw6Y/view?usp=sharing

also, you can check a screen recording by this link:

https://drive.google.com/file/d/1Yy7sqHQQJIUZ2QAaLogxS-bsRuuTkC0N/view?usp=sharing

So, as you can see it works by changing the alpha, however, it should be changed and translation for the text should be applied instead.

Are there some useful examples of how to do so, any information/suggestion I appreciate:)