The Layout Animations Show
summary
Shows concrete Compose layout animation patterns and working code: use state-driven APIs AnimatedVisibility, Crossfade and AnimatedContent paired with transitions and animationSpecs (tween, spring, keyframes, snap) to build a curtain, a crossfading conductor, a click counter, a staged size shifter, and a lazy-grid tumbler. Demonstrates using AnimatedVisibility/enter/exit/update transitions, mixing keyframes and sizeTransform for staged resizing, and one-liners like animateItemPlacement & animateContentSize to animate movement, size and content changes — examples compile and produce the described effects.
AI-written summary · about
chapters (19)
- 0:00Welcome to Layout Animations
- 1:51Layout Animation Basics
- 3:58Using Animation APIs
- 5:20Setting Up the Stage
- 6:24Adding Transitions to Visibility
- 8:53Customizing Enter and Exit
- 11:20Introducing Crossfade
- 13:28Animation Specs Explained
- 16:18Animated Content Basics
- 18:45Transitions in Animated Content
- 19:06Building the Clicker
- 20:52Using the Correct State
- 22:40Understanding Size Transform
- 24:23Creating the Size Shifter
- 28:56Introducing Modifier Tumblers
- 31:23Animating Grid Reordering
- 32:25Handling Size Changes
- 33:50Adding Content Animations
- 36:15Final Showcase
related talks
36mThe Layout Animations Show
42mGlitz and glamor: the compose edition
47mAnimations with Compose: Make Your Apps Shimmering
07m5 quick animations to make your Compose app stand out
26mFuture Composition of Animation
28mComposable Sheep: A Compose Animations Journey
32mThe complete guide to Compose animations
37mAdvanced Layout Animations in Compose