Material Motion Core¶

Material Motion Core is a library for implementing motion system in Material Components for Jetpack Compose and Compose Multiplatform.

Usage¶

This library provides support for motion patterns defined in the Material spec.

Shared axis¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialSharedAxisX(
    targetState = screen,
    forward = true,
    slideDistance = 30.dp // (optional)
) { newScreen ->
    // composable according to screen
}

// or

val slideDistance = rememberSlideDistance(slideDistance = 30.dp)
MaterialMotion(
    targetState = screen,
    motionSpec = {
        materialSharedAxisX(forward = forward, slideDistance = slideDistance)
    },
    pop = forward.not()
) { newScreen ->
    // composable according to screen
}

Axis X	Axis Y	Axis Z

Fade through¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialFadeThrough(
    targetState = screen
) { newScreen ->
    // composable according to screen
}

// or

MaterialMotion(
    targetState = screen,
    motionSpec = { materialFadeThrough() }
) { newScreen ->
    // composable according to screen
}

Fade Through

Fade¶

val (visible, onVisibleChanged) = remember { mutableStateOf(...) }
MaterialFade(
    visible = visible
) {
    // composable to show
}

Fade

Elevation scale¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialMotion(
    targetState = screen,
    motionSpec = { materialElevationScaleIn() with ... }
    // or
    motionSpec = { ... with materialElevationScaleOut() }
) { newScreen ->
    // composable according to screen
}

ElevationScale

Hold¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialMotion(
    targetState = screen,
    motionSpec = { holdIn() with ... }
    // or
    motionSpec = { ... with holdOut() }
) { newScreen ->
    // composable according to screen
}

Hold

CircularReveal¶

var visible: Boolean by remember { mutableStateOf(false) }
Box(
    modifier = Modifier.circularReveal(
        visible = visible,
        center = { fullSize ->
            Offset(x = 1f * fullSize.width, y = 0f * fullSize.height) // TopRight
        },
    )
) { ... }

CircularReveal

If you want to use different motions depending on the state:¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
val slideDistance = rememberSlideDistance(slideDistance = 30.dp)
MaterialMotion(
    targetState = screen,
    motionSpec = {
        when (targetState) {
           ... -> materialSharedAxisY(forward = true, slideDistance = slideDistance)
           ... -> materialFadeThroughIn() with materialFadeThroughOut()
           ...
        }
    },
    pop = false // whether motion contents are rendered in reverse order.
) { newScreen ->
    // composable according to screen
}

Demo

If you want to change motion durations:¶

Just pass a duration(=ms) directly when creating material motion.

For example:

val motionSpec = materialFadeThrough(durationMillis = 300)

Download¶

repositories {
    mavenCentral()
}

dependencies {
    implementation "io.github.fornewid:material-motion-compose-core:<version>"
}