Pizza App Animation in Jetpack Compose

In this tutorial, we’ll build a fun pizza carousel animation in Android using Jetpack Compose. The effect includes:

• A horizontally scrolling pizza list (carousel).
• A smooth scaling effect for the center pizza.
• A subtle arc motion when scrolling.
• A rotation animation when a pizza enters the center.

👉 Design reference: Figma file

Let’s get started on implementing it.

Step 1: Setup Pager State and Carousel

First, prepare a list of pizza images:

    val pizzaDrawables = listOf(
        R.drawable.pizza_olive,
        R.drawable.pizza_shrimp,
        R.drawable.pizza_peporoni,
        R.drawable.pizza_peporoni,
        R.drawable.pizza_peporoni,
        R.drawable.pizza_peporoni,
    )

Now create a PagerState to track the current page:

    val pagerState = rememberPagerState(initialPage = 0) {
        pizzas.size   // 👈 supply pageCount here
    }

Use HorizontalPager to build a carousel with half-visible side pizzas:

HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 100.dp), // half pizza visible
    modifier =…