chrisbanes/skills
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.
npx skills add chrisbanes/skills --skill compose-animations
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.
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design …
145.5K installsSurvey a codebase's animation and motion code as a senior motion advisor, then produce a priori…
117.7K installs>- Add, fix, refactor, debug, test, or explain Flutter animations and motion effects. Use when …
15.1K installsProfessional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGS…
2.4K installsTailwind CSS animations and transitions including built-in utilities and custom keyframes. PROA…
2.3K installsOther skills from chrisbanes/skills · top by installs.
npx skills add chrisbanes/skills
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
main
Files included with this skill beyond the listing page.
SKILL.md
3,942 B
SUMMARY.md
3,887 B
Pick the smallest API that expresses the motion and its lifecycle.
Animatable only when gestures, interruption, or imperative control require it.AnimatedVisibility removes it after exit. Do not use a fade when unmounting is required.AnimatedContent, render from the content lambda target and choose a contentKey only when visual identity differs from payload equality. Read [AnimatedContent identity](references/animated-content.md) for state-holder details.State in layout or draw block modifiers when it changes at frame rate; route deeper diagnosis to [Compose performance](../compose-performance/SKILL.md).| Need | Prefer |
|---|---|
| Show/hide a subtree with enter/exit semantics | AnimatedVisibility |
| One value follows state | animate*AsState |
| Several values follow one boolean, enum, or sealed state | rememberTransition plus child animations |
| Child size changes | Modifier.animateContentSize() |
| Different composable trees fill one region | AnimatedContent, or Crossfade for the simple case |
| Drag, fling, interruption, or imperative control | Animatable |
Use an AnimationSpec when the default motion is wrong and a distinct label when multiple animations need tooling visibility.
val width by animateDpAsState(
targetValue = if (expanded) 200.dp else 56.dp,
animationSpec = spring(dampingRatio = 0.7f),
label = "fabWidth",
)For values that must remain synchronized, define them on one transition rather than several independent animate*AsState calls:
val transition = rememberTransition(targetState = phase, label = "phase")
val alpha by transition.animateFloat(label = "alpha") { target ->
if (target == Phase.Visible) 1f else 0f
}
val offset by transition.animateDp(label = "offset") { target ->
if (target == Phase.Visible) 0.dp else 24.dp
}For animated fills, prefer drawBehind { drawRect(color.value) } over a value-form background when the color updates every frame. For an API ambiguity, start with the official Choose an animation API guide; use rememberInfiniteTransition for repeating cycles and SeekableTransitionState for seekable or test-controlled progress.