# AnimatedPage

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AnimatedPage.composable#AnimatedPage(kotlin.Int,androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.graphics.Color,kotlin.Function0)( pageIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, pagerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/PagerState, contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Animates a page within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` with a scaling and scrim effect based on its position. |

## Functions

### AnimatedPage

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/PagerScaffold.kt+function:AnimatedPage) Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.6.0)

```
@Composable
fun AnimatedPage(
    pageIndex: Int,
    pagerState: PagerState,
    contentScrimColor: Color = MaterialTheme.colorScheme.background,
    content: @Composable () -> Unit
): Unit
```

Animates a page within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` with a scaling and scrim effect based on its position.

This composable applies a scaling animation and a scrim overlay to the page content, creating a visual cue for page transitions. The animation is responsive to the page's position within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` and adapts to the device's reduce motion settings and layout direction.

| Parameters |
|---|---|
| `pageIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The index of the page being animated. |
| `pagerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/PagerState` | The `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/PagerState` of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. |
| `contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colorScheme.background` | The color of the scrim overlay applied during page transitions. Defaults to the background color of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/MaterialTheme`. Set this to transparent to have no scrim applied during page transitions. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The composable content of the page. |