← ClaudeAtlas

compose-motionlisted

Jetpack Compose animation foundations - animate*AsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout, gestures.
leobbaroni/maestro · ★ 1 · Web & Frontend · score 67
Install: claude install-skill leobbaroni/maestro
# Compose Motion - Sub-skill > Jetpack Compose animation core. Loaded for Android Compose and Compose Multiplatform projects. > Concise rules here. Deep-dive in `references/`. > Baseline: current stable Jetpack Compose (1.7+). Modern stable APIs only - no `swipeable`, no `animateContentSize` hacks where `AnimatedContent` is correct. --- ## API Decision Tree | Need | API | |---|---| | Single value over time | `animateFloatAsState`, `animateDpAsState`, `animateColorAsState`, etc. | | Visibility / mount-unmount | `AnimatedVisibility(visible) { ... }` | | Crossfade between states | `Crossfade(target) { state -> ... }` | | Multi-state coordinated | `updateTransition(target).animateFloat { ... }` | | Manual control / interruption | `Animatable(initialValue)` + `animateTo(...)` | | Looping / infinite | `rememberInfiniteTransition().animateFloat(...)` | | Shared elements | `SharedTransitionLayout` + `Modifier.sharedElement(...)` (Compose 1.7+) | | Layout swap with anim | `AnimatedContent(target) { ... }` | | Drag / swipe | `Modifier.draggable` + `Animatable.snapTo`/`animateTo`, or `Modifier.anchoredDraggable` for snap-points | **Rule:** climb the ladder only when needed. `animate*AsState` covers 70% of cases. Reach for `Animatable` only when you need to interrupt, chain, or read velocity. --- ## Spring API (opinionated defaults) | Use | Spec | |---|---| | UI snap (modal, drawer, tab) | `spring(stiffness = Spring.StiffnessMediumLow, dampingRatio = Spring.DampingRatioNoBouncy)`