skills.rest
w0lzard
w0lzardCOMMUNITY
Explore all skills by this author →
GitHub

compose-animations

Guides selection and implementation of Jetpack Compose animation APIs for UI motion.

Updated Jul 1, 2026
Search Tags:#animation#android#kotlin#jetpack compose#animatedcontent#ui transitions#animatedvisibility
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill compose-animations-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-animations
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/compose-animations
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill compose-animations-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right Jetpack Compose animation API is confusing—AnimatedVisibility, animateAsState, rememberTransition, AnimatedContent, and Crossfade overlap in capability, and picking the wrong one leads to desynchronized motion, unnecessary recomposition, or composables that never leave the tree. ## Core Features & Use Cases - API selection guidance: Decision tables and a flowchart map each motion need (show/hide, single property, multi-property, content swap) to the smallest appropriate Compose animation API. - Implementation patterns: Copy-ready Kotlin snippets for AnimatedVisibility, animateColorAsState with drawBehind, animateContentSize, rememberTransition with child animations, and AnimatedContent with contentKey for state-holder wrappers like AsyncResult. - Common mistake fixes: A troubleshooting table covers pitfalls like fading with alpha while expecting unmounting, drifting independent animateAsState calls, and AnimatedContent re-animating on every data refresh. - Use Case: When building a profile screen that transitions between loading, content, and error states, use the contentKey guidance to animate only on shape changes instead of every payload update. ## Quick Start Ask the AI to help you animate a composable in Jetpack Compose, for example to add an enter/exit transition to an expanding details panel or to coordinate multiple animated properties from one state enum.

Frequently Asked Questions about compose-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate visibility in Jetpack Compose?▼

Use AnimatedVisibility with a visible boolean to add enter and exit transitions; the composable is removed from the tree after the exit animation completes. Fading with animateFloatAsState on alpha only changes opacity and keeps the composable in composition.

AnimatedVisibility vs animateFloatAsState in Compose?▼

AnimatedVisibility removes content from the composition after the exit animation, while animateFloatAsState on alpha only fades visually and keeps children mounted. Choose AnimatedVisibility for true show/hide semantics and alpha animation when you intentionally keep state or focus alive.

How do I animate multiple properties together in Compose?▼

Use rememberTransition keyed on a single state (boolean, enum, or sealed class) and define child animations like animateFloat, animateDp, and animateColor on that transition. This keeps all values synchronized, unlike multiple independent animate*AsState calls that can drift.

Why does AnimatedContent animate on every data refresh?▼

AnimatedContent treats every unequal targetState as new content, so a new Success(value) instance triggers a transition. Add a contentKey that maps state to its visual shape, such as constant keys for loading, content, and error branches.

Should I use Modifier.background or drawBehind for animated colors?▼

The official Compose quick guide recommends Modifier.drawBehind with drawRect for animated fills behind children, applying the animated color in the draw phase. This avoids extra work compared to animating a color through Modifier.background.

When should I use Animatable instead of animate*AsState?▼

Use Animatable for gesture-driven, cancelable, or imperative motion such as drag, fling, and interruptible springs combined with pointerInput. For simple target-based animations, animate*AsState or rememberTransition is the smaller appropriate API.

Related Skills

Explore More Software Engineering Skills→
maichanchinhmaichanchinh
1

mvi-activity

Implement MVI architecture for Android Activities with Jetpack Compose.

Community
Intermediate
decoutkhanqindevdecoutkhanqindev

deferring-state-reads

Migrates hot Jetpack Compose state reads from Composition to Layout or Draw phases using lambda modifiers.

Community
Intermediate
JCE-Joshhh77JCE-Joshhh77
16

android-compose

Manage state and side effects in Jetpack Compose UIs.

Community
Intermediate
22Teikk22Teikk

compose-animations

Selects and reviews Jetpack Compose animation APIs for state-driven UI motion.

Community
Intermediate