🙏 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
| // 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!
The #1 destination for all things Jetpack Compose 🤖📱