# Compose Motion

Jetpack Compose animation foundations - animate*AsState, AnimatedVisibility, Crossfade...

- Repository: https://github.com/AThevon/genjutsu (721 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

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

## Description

Jetpack Compose animation foundations - animate*AsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout, gestures.

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

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was
> verified on **2026-09-08** against primary sources. What against, and when, is in
> `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number.

# Compose Motion - Sub-skill

> Jetpack Compose animation core. Loaded for Android Compose and Compose Multiplatform projects.
> Concise rules here. Deep-dive in `references/`.
> Baseline: Jetpack Compose 1.12 (1.12.1 current stable, Sep 2026) - i.e. Compose BOM 2026.09.00. Modern stable APIs only - no `swipeable`, no `animateContentSize` hacks where `AnimatedContent` is correct. Anything below flagged 'Compose 1.x+' is a *since* marker, not the target.

---

## 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)

The rest: https://github.com/AThevon/genjutsu/blob/HEAD/skills/_jutsu/compose-motion/SKILL.md