Five quick animations in Compose
Stay organized with collections
Save and categorize content based on your preferences.
These 5 quick and easy animations can help make your app come to life in just a
few minutes. Make your Compose app stand out even if you don't have the time to
learn everything there is to know about animations.
Key points
- Wrap changing visible states in an
AnimatedVisibility composable to
transform how state changes show on screen.
- To smoothly transition between two states, use the built-in modifier
animateContentSize.
- Wrap a
when conditional in an AnimatedContent composable to switch
content based on the provided target states.
- Use
animate*AsState functions to perform the animation when the state
of your input variable changes.
- Compose triggers a redraw as variables change over time, creating an
animation on screen.
Resources
Collections that contain this guide
This guide is part of these curated Quick Guide collections that cover
broader Android development goals:
Display images
Discover techniques for using bright, engaging visuals to
give your Android app a beautiful look and feel.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-02-06 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-02-06 UTC."],[],[],null,["# Five quick animations in Compose\n\n\u003cbr /\u003e\n\nThese 5 quick and easy animations can help make your app come to life in just a\nfew minutes. Make your Compose app stand out even if you don't have the time to\nlearn everything there is to know about animations. \n\nKey points\n----------\n\n- Wrap changing visible states in an [`AnimatedVisibility`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)) composable to transform how state changes show on screen.\n- To smoothly transition between two states, use the built-in modifier [`animateContentSize`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)).\n- Wrap a `when` conditional in an [`AnimatedContent`](/reference/kotlin/androidx/compose/animation/package-summary#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)) composable to switch content based on the provided target states.\n- Use [`animate*AsState`](/reference/kotlin/androidx/compose/animation/core/package-summary#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)) functions to perform the animation when the state of your input variable changes.\n- Compose triggers a redraw as variables change over time, creating an animation on screen.\n\nResources\n---------\n\n- [Blog: Customizing AnimatedContent in Jetpack Compose](https://medium.com/androiddevelopers/customizing-animatedcontent-in-jetpack-compose-629c67b45894)\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
