How can i animated scroll to page when using HorizontalPager without see middle screen(s)?

Question

Since I have multiple screens on the same page, I want to switch animatedly, but I don't want the pages in between to appear.

Let's say i have three screen:

@Composable
fun FirstRedScreen(
    pagerState: PagerState
){

    val coroutineScope = rememberCoroutineScope()

    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color.Red),
        contentAlignment = Alignment.Center){

        Button(onClick = {
            coroutineScope.launch {
                pagerState.animateScrollToPage(page = 2)
            }
        }) {
            Text(text = "Go to ThirdGreenScreen")
        }
    }

}
@Composable
fun SecondBlueScreen(){
    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color.Blue))
}
@Composable
fun ThirdGreenScreen(){
    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color.Green))
}

and horizontal pager:

val pagerState = rememberPagerState()

    HorizontalPager(
        modifier = Modifier
            .fillMaxSize(),
        count = 3,
        state = pagerState,
        userScrollEnabled = false
    ) { page->

        when(page){
            0 -> {FirstRedScreen(pagerState)}
            1 -> {SecondBlueScreen()}
            2 -> {ThirdGreenScreen()}
        }
    }

I don't want to see the 2nd screen in between when switching from the 1st screen to the 3rd screen. how can I do that? (with animation, i can do that without animation for sure)

Do I have an alternative other than horizontal pager to do this?

Problematic animation:

Answer 1

Try using scrollToPage instead of animateScrollToPage, as it will scroll (jump immediately) to a given page, without an animation.

pagerState.scrollToPage(page = 2)