
Compose Animations
Use when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating...
Install
npx skills add chrisbanes/skills --skill compose-animations -g -a claude-code -y- Repository
- chrisbanes/skills1.1k
- Category
- Writing
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Lightabout 1,018 tokens
- Runs scripts
- No, instructions only
What it does
Use when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating one property toward a target, color or size transitions, multiple properties from one state, switching composable content, or choosing between AnimatedVisibility, animate*AsState, rememberTransition, AnimatedContent, and Crossfade.
Compose: animations
Core principle
Pick the smallest API that expresses the motion and its lifecycle.
Procedure
- Identify the job: show or hide a subtree, animate one value, coordinate values from one state, resize content, swap content, or handle user-driven motion.
- Choose the matching API from the table. Prefer target-state APIs; use
Animatableonly when gestures, interruption, or imperative control require it. - Check lifecycle: an alpha animation keeps content composed;
AnimatedVisibilityremoves it after exit. Do not use a fade when unmounting is required. - For
AnimatedContent, render from the content lambda target and choose acontentKeyonly when visual identity differs from payload equality. In a swap between distinct items, keep the target value as the identity (the default) or key by a stable item ID; do not collapse different items to a shared presence or branch key. In a review, name any rendered expression that captures outer target state and recommend using the lambda target there. If a test must prove transition identity, check outgoing and incoming content during the overlap; checking only the settled destination misses a shared-identity bug. Read AnimatedContent identity for state-holder details. - Keep animated
Statein layout or draw block modifiers when it changes at frame rate; route deeper diagnosis to Compose performance. - Use Navigation Compose transitions for destination swaps it owns, and dedicated libraries for art-based motion.
- Finish when the API, lifecycle, and content identity match the UI, no simpler API fits, and the relevant behavior is verified.
