[Pager] Depth page animation

[FjodorsPohodnevs]

Hi. I am using ViewPager2 and Depth page animation(Page sliding above another page) like this - https://developer.android.com/develop/ui/views/animations/screen-slide-2#depth-page for vertical pager.

I wanted to migrate to Compose pager and still have such animation.

But i have run into a problem. When i scroll down - page 1 appears above page 0, but i want page 0 be above page 1.

https://user-images.githubusercontent.com/5684351/210962411-5bd661e2-40cb-437f-9f07-5b443f3329a8.mp4

In Viewpager2 i used translationZ = -1fto deal with such issue. In Compose graphicsLayer does not have translationZ. Instead i tried to use Modifier.zIndex(if(page == 0) 4f else 3f) but it did not work. Still page 1 was above page 0.

Is there any other way to implement such page depth animation?

Here is the code for Pager

VerticalPager(count = 2) { page ->
                    Box(modifier = Modifier
                        .zIndex(if(page == 0) 4f else 3f)
                        .graphicsLayer {
                            val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue

                            if (page == 0) {
                                scaleX = 1f
                                scaleY = 1f
                                translationY = 0f
                            } else {
                                lerp(
                                    start = 0.95f,
                                    stop = 1f,
                                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                                ).also { scale ->
                                    scaleX = scale
                                    scaleY = scale
                                }

                                alpha = lerp(
                                    start = 0f,
                                    stop = 1f,
                                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                                )

                                translationY = -1 * height * pageOffset.coerceIn(0f, 1f)
                            }
                        }) {
                        Text(
                            text = "Page: $page",
                            color = MaterialTheme.colors.onPrimary,
                            style = MaterialTheme.typography.body1,
                            modifier = Modifier
                                .zIndex(if(page == 0) 4f else 3f)
                                .fillMaxSize()
                                .background(if (page == 0) Color.Red else Color.Blue)
                        )
                    }
                }

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.