Horizontal Pager Item Width

[thproflord]

I have some questions regarding an animation that I want to achieve. Is there a way to animate the width of the item in the horizontal pager? Not the content itself, but the container where the content is inserted. Since when I rotate the content with respect to Y, the content rotates but the width remains the same, and my card goes off screen. Is there a way to do this?

[thproflord]

So i need this kind of animation but when doing it the card gets outside

what.i.need.mp4

fun Modifier.pagerRotationTransition(page: Int, pagerState: PagerState) = graphicsLayer {
    val pageOffset = pagerState.offsetForPage(page)
    clip = true
    if (pageOffset < -1f) {
        transformOrigin = TransformOrigin(0.5f, 0.5f)
        rotationY = -40F
    } else if (pageOffset <= 0) {
        transformOrigin = TransformOrigin(0.5f, 0.5f)
        rotationY = -40f * pageOffset.absoluteValue
    } else if (pageOffset <= 1) {
        transformOrigin = TransformOrigin(.5f, 0.5f)
        rotationY = 40f * pageOffset.absoluteValue
    } else {
        transformOrigin = TransformOrigin(.5f, 0.5f)
        rotationY = 40F
    }

}

Gets outside because is rotating in its center

What I currently have is this animation

what.i.have.mp4

I have to scale it down otherwise it goes to big and cuts on top but the cards now is visible in the sides

@OptIn(ExperimentalFoundationApi::class)
fun Modifier.pagerRotationTransition(page: Int, pagerState: PagerState) = graphicsLayer {
    val pageOffset = pagerState.offsetForPage(page)
    clip = true
    if (pageOffset < -1f) {
        transformOrigin = TransformOrigin(0f, 0.5f)
        rotationY = -40F
        scaleX = .7F
        scaleY = .7F
    } else if (pageOffset <= 0) {
        val scale = 1f - (pageOffset.absoluteValue * .3F)
        transformOrigin = TransformOrigin(0f, 0.5f)
        rotationY = -40f * pageOffset.absoluteValue
        scaleX = scale
        scaleY = scale
    } else if (pageOffset <= 1) {
        val scale = 1f - (pageOffset.absoluteValue * .3F)
        transformOrigin = TransformOrigin(1f, 0.5f)
        rotationY = 40f * pageOffset.absoluteValue
        scaleX = scale
        scaleY = scale
    } else {
        transformOrigin = TransformOrigin(1f, 0.5f)
        rotationY = 40F
        scaleX = .7F
        scaleY = .7F
    }

}

Without scaling

no.scale.mp4

fun Modifier.pagerRotationTransition(page: Int, pagerState: PagerState) = graphicsLayer {
    val pageOffset = pagerState.offsetForPage(page)
    clip = true
    if (pageOffset < -1f) {
        transformOrigin = TransformOrigin(0f, 0.5f)
        rotationY = -40F
    } else if (pageOffset <= 0) {
        val scale = 1f - (pageOffset.absoluteValue * .3F)
        transformOrigin = TransformOrigin(0f, 0.5f)
        rotationY = -40f * pageOffset.absoluteValue
    } else if (pageOffset <= 1) {
        val scale = 1f - (pageOffset.absoluteValue * .3F)
        transformOrigin = TransformOrigin(1f, 0.5f)
        rotationY = 40f * pageOffset.absoluteValue
    } else {
        transformOrigin = TransformOrigin(1f, 0.5f)
        rotationY = 40F
    }
}