Animating content changes with Jetpack Compose
summary
Crossfade and animateContentSize handle simple content swaps and expand/contract transitions; crossfade gives a one-line fade, animateContentSize animates size but reserves a maximum height so parents must allow space. Use AnimatedVisibility for list-to-detail show/hide, AnimatedContent with a contentTransform (slideIntoContainer, sizeTransform) for drawers/cards, and BottomSheetScaffold or ModalBottomSheet for draggable sheets. Dialogs require a build delay (about 300 ms) and a coroutine-delayed onDismiss so enter and exit animations actually run.
AI-written summary · about
chapters (9)
- 0:00Introduction to animations
- 1:55Four types of content animations
- 2:37Content to content transitions
- 4:24List to detail animations
- 6:08Navigation drawer animations
- 7:55Bottom sheet animations
- 9:39Slide animations for corner content
- 11:26Dialogue animations explained
- 15:22Summary and best practices
related talks
21mAnimations with Jetpack Compose
47mAnimations with Compose: Make Your Apps Shimmering
32mJetpack Compose for Games & Animations
31mDesigning Media Friendly Jetpack Compose Components
27mInside Jetpack Compose
01h 12mJetpack Compose over inheritance
24mJetpack Compose Performance Improvements Learned from Real Examples
39mMagic Sprinkles: Adding animations to your app with Jetpack Compose