EmergeTools logo
🙏 Supported by Emerge Tools
The platform for all your mobile performance needs

Material Design Motion Transitions

Author: Chris Sinco

Reusable transitions that map to Material motion system

Material Design Motion Transitions Demo

// Requires Compose 1.1.0-alpha02+
// Best used with navigation animation transitions in Accompanist 0.17.0+
import androidx.compose.animation.*
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
val SharedXAxisEnterTransition: (Density) -> EnterTransition = { density ->
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
with(density) { 30.dp.roundToPx() }
}
}
val SharedXAxisExitTransition: (Density) -> ExitTransition = { density ->
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
with(density) { (-30).dp.roundToPx() }
}
}
val SharedYAxisEnterTransition: (Density) -> EnterTransition = { density ->
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
slideInVertically(animationSpec = tween(durationMillis = 300)) {
with(density) { 30.dp.roundToPx() }
}
}
val SharedYAxisExitTransition: (Density) -> ExitTransition = { density ->
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
slideOutVertically(animationSpec = tween(durationMillis = 300)) {
with(density) { (-30).dp.roundToPx() }
}
}
@ExperimentalAnimationApi
val SharedZAxisEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
scaleIn(initialScale = 0.8f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val SharedZAxisVariantEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 60, delayMillis = 60, easing = LinearEasing)) +
scaleIn(initialScale = 0.8f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val SharedZAxisExitTransition =
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
scaleOut(targetScale = 1.1f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val SharedZAxisVariantExitTransition = scaleOut(targetScale = 1.1f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val FadeThroughEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
scaleIn(initialScale = 0.92f, animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing))
val FadeThroughExitTransition = fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing))
@ExperimentalAnimationApi
val FadeEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 45, easing = LinearEasing)) +
scaleIn(initialScale = 0.8f, animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing))
val FadeExitTransition = fadeOut(animationSpec = tween(durationMillis = 75, easing = LinearEasing))

Have a project you'd like to submit? Fill this form, will ya!

If you like this snippet, you might also like:

Maker OS is an all-in-one productivity system for developers

I built Maker OS to track, manage & organize my life. Now you can do it too!