Collapsing Toolbar with Parallax Effect and Curved Animation with Jetpack Compose
summary
Shows how to build a collapsing toolbar with a parallax header and a curved-title motion using only Jetpack Compose (no third-party libraries). Models header alpha as an affine function and triggers collapse when scroll > headerHeight - toolbarHeight (275dp vs 56dp), animates title X/Y via lerp and creates a quadratic Bézier by double lerp, uses graphicLayer and animatedVisibility, and demonstrates near-zero recompositions in Layout Inspector (only the toolbar recomposes).
AI-written summary · about
chapters (16)
- 0:00Compose animation intro
- 1:09Project goals
- 2:36Box and composables
- 4:26Parallax effect
- 6:10Fade animation affine
- 8:18Toolbar reveal threshold
- 9:59Linear interpolation intro
- 13:11Title translation linear
- 15:19Quadratic Bézier curves
- 18:48Quadratic Bézier impl
- 19:11Animation demo
- 19:52Performance Layout Inspector
- 21:57Optimizing recompositions
- 23:43Performance best practices
- 24:26Advanced examples
- 25:30Conclusion
related talks
36mPractical Magic with Animations in Compose
36mPractical implementations of powerful UI expressions using Jetpack Compose
32mPractical Magic with Animations in Compose
31mModel-driven navigation with Jetpack Compose – From zero to hero
33mBuild adaptive apps with Jetpack Compose
38mImplementing That Common UI in Jetpack Compose: X Ways
32mJetpack Compose for Games & Animations
21mAnimations with Jetpack Compose