Practical Magic with Animations in Compose
summary
Shows step-by-step implementation of a nonstandard navigation drawer in Jetpack Compose that translates, scales to 0.8 and rounds corners using graphicsLayer, gesture control via an animatable plus draggable with fling handling (spline-based decay and animateTo) so it snaps to open or closed, and a simpler version using anchorDragable; compares spring vs tween for natural motion; also builds an animatable SVG jellyfish with infinite translation and touch-triggered blink, and it works as demonstrated.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:25Breaking down animations
- 5:39When to animate
- 8:05State change animations
- 10:13Gesture-driven animations
- 13:45Handling fling gestures
- 17:46Simplifying with anchor dragable
- 19:54Customizing animation specs
- 24:08Spring vs tween animations
- 26:54Built-in animation composables
- 29:19Choosing the right API
- 31:45Summary and key principles
- 32:25Bonus: Animating image vectors
related talks
32mPractical Magic with Animations in Compose
21mAnimations with Jetpack Compose
47mAnimations with Compose: Make Your Apps Shimmering
39mMagic Sprinkles: Adding animations to your app with Jetpack Compose
36mPractical implementations of powerful UI expressions using Jetpack Compose
31mModel-driven navigation with Jetpack Compose – From zero to hero
32mJetpack Compose for Games & Animations
37mJetpack Compose for Games & Animations