# Compose Animations

Use when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating...

- Repository: https://github.com/chrisbanes/skills (1135 stars)
- Category: Writing
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add chrisbanes/skills --skill compose-animations -g -a claude-code -y`
Codex: `npx skills add chrisbanes/skills --skill compose-animations -g -a codex -y`
Cursor: `npx skills add chrisbanes/skills --skill compose-animations -g -a cursor -y`
Gemini CLI: `npx skills add chrisbanes/skills --skill compose-animations -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add chrisbanes/skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Compose: animations

## Core principle

Pick the smallest API that expresses the motion and its lifecycle.

## Procedure

1. 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.
2. Choose the matching API from the table. Prefer target-state APIs; use `Animatable` only when gestures, interruption, or imperative control require it.
3. Check lifecycle: an alpha animation keeps content composed; `AnimatedVisibility` removes it after exit. Do not use a fade when unmounting is required.
4. For `AnimatedContent`, render from the content lambda target and choose a
   `contentKey` only 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](references/animated-content.md) for state-holder
   details.
5. Keep animated `State` in layout or draw block modifiers when it changes at frame rate; route deeper diagnosis to [Compose performance](../compose-performance/SKILL.md).
6. Use Navigation Compose transitions for destination swaps it owns, and dedicated libraries for art-based motion.
7. Finish when the API, lifecycle, and content identity match the UI, no simpler API fits, and the relevant behavior is verified.

## API choice

The rest: https://github.com/chrisbanes/skills/blob/HEAD/skills/compose-animations/SKILL.md