SUBSCRIBE NOW

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

SUBSCRIBE NOW

Keep up the good work with the newsletter 💪 I really enjoy it

SUBSCRIBE NOW

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

SUBSCRIBE NOW

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

SUBSCRIBE NOW

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

SUBSCRIBE NOW

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

SUBSCRIBE NOW

Thanks for taking the time and energy to do it so well

JetpackCompose.app's Newsletter

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

JetpackCompose.app's Newsletter

Keep up the good work with the newsletter 💪 I really enjoy it

JetpackCompose.app's Newsletter

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

JetpackCompose.app's Newsletter

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

JetpackCompose.app's Newsletter

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

JetpackCompose.app's Newsletter

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

JetpackCompose.app's Newsletter

Thanks for taking the time and energy to do it so well

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))

view raw MaterialMotionTransitions.kt hosted with ❤ by GitHub

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!

Get it now

The #1 destination for all things Jetpack Compose 🤖📱

Which Compose API?

Compare Frameworks

Compose Catalog

Compose Code Snippets

	// 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))