Magic Sprinkles: Adding animations to your app with Jetpack Compose
summary
A hands‑on walkthrough of Jetpack Compose animation APIs showing concrete code and outcomes: uses Crossfade for loading states, animateColorAsState and rememberInfiniteTransition for pulsing and button color, an accompanist navigation animation swap of NavHost for slide transitions, and a custom confetti modifier built as a particle system that updates each frame with awaitFrame and Modifier.drawBehind. Sample app code lives in the companion repo with merge request numbers (for example MR #4, #1, #11) and the demos port to Compose for Desktop.
AI-written summary · about
chapters (29)
- 0:00Intro
- 0:29Demo
- 3:52Animations
- 4:40Questions
- 5:13Compose
- 7:20Animation API
- 11:20Animation Graph
- 11:44Animation Spec
- 13:01Crossfade
- 13:34Loading Indicator
- 14:25BuySell Button
- 16:18Remember Infinite Transition
- 17:23Tab Indicator
- 18:15Update Transition
- 19:02Fancy Indicator
- 19:20Navigation Animation
- 19:55Linear Progression
- 20:41Animated Nav Controller
- 22:43Animated Content Scope
- 24:22State Keyframes
- 26:30Pie Chart
- 27:24Confetti
- 28:44Confetti State
- 29:03Confetti Modifier
- 30:45DrawBehind Modifier
- 31:25Final Demo
- 32:41My Questions
- 33:31Summary
- 34:43QA
related talks
47mAnimations with Compose: Make Your Apps Shimmering
21mAnimations with Jetpack Compose
07m5 quick animations to make your Compose app stand out
36mPractical implementations of powerful UI expressions using Jetpack Compose
32mThe complete guide to Compose animations
36mPractical Magic with Animations in Compose
32mPractical Magic with Animations in Compose
32mJetpack Compose for Games & Animations