skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

compose-motion

Implement Jetpack Compose animations using animate*AsState, AnimatedVisibility, transitions, and gestures.

1|Updated Jul 19, 2026
Search Tags:#animation#android#kotlin#jetpack compose#gestures#recomposition#shared element transition
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill compose-motion-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-motion
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/compose-motion
Command: npx skills add https://github.com/leobbaroni/maestro --skill compose-motion-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing and correctly implementing the right Jetpack Compose animation API is error-prone: developers pick overly complex APIs for simple cases, animate layout properties that cause jank, or misconfigure shared element transitions that silently fail. This Skill provides an opinionated decision tree, tuned spring specs, and anti-pattern fixes for Compose animation work. ## Core Features & Use Cases - API Decision Tree: Maps each animation need (single value, visibility, crossfade, multi-property, shared elements, gestures) to the correct Compose API such as animateFloatAsState, AnimatedVisibility, updateTransition, Animatable, or SharedTransitionLayout. - Opinionated Spring Specs: Provides pre-tuned stiffness and damping values for UI snap, tactile feedback, bouncy reveals, and drag-follow interactions. - Anti-Pattern Fixes: Documents BAD/GOOD code pairs for animating layout size vs transforms, LaunchedEffect keying, LazyColumn item keys, and nested AnimatedContent in lists. - Deep-Dive References: Covers gestures and nested scroll, recomposition performance with Macrobenchmark and Baseline Profiles, and shared element transition recipes. - Use Case: When building an Android screen where tapping a card in a list should morph into a detail view, use this Skill to wire SharedTransitionLayout with matching rememberSharedContentState keys and a tuned boundsTransform spring. ## Quick Start Ask the AI to implement a card-to-detail shared element transition in Jetpack Compose using this skill's SharedTransitionLayout recipe.

Frequently Asked Questions about compose-motion

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

FAQPage Schema
How do I animate a value in Jetpack Compose?▼

Use animateFloatAsState (or the Dp, Color, Offset variants) with a target value and an animationSpec such as spring or tween. Reach for Animatable only when you need to interrupt, chain animations, or read velocity.

How do I implement shared element transitions in Compose?▼

Wrap the screen swap in SharedTransitionLayout, then apply Modifier.sharedElement with rememberSharedContentState using the same key on both screens. Keys must be stable and id-based, and both SharedTransitionScope and AnimatedVisibilityScope must be passed down.

When should I use AnimatedContent vs Crossfade in Compose?▼

Use Crossfade when you only need a simple fade between states. Use AnimatedContent when you need slide, scale, or layout-aware transitions, since Crossfade does not animate container size.

Why does my Compose animation cause jank during scrolling?▼

Jank usually comes from reading animation state during composition, which recomposes every frame. Switch to lambda-based modifiers like Modifier.offset { } or Modifier.graphicsLayer { } so state reads happen in layout or draw phases instead.

Does Compose animation support reduced motion accessibility?▼

Yes. Read Settings.Global.ANIMATOR_DURATION_SCALE or call ValueAnimator.areAnimatorsEnabled() to detect reduced motion, then swap spring specs for snap() so animations complete instantly for users who disable animations.

What replaced the deprecated swipeable modifier in Compose?▼

Modifier.anchoredDraggable with AnchoredDraggableState replaced swipeable in Compose 1.6+. It powers swipe-to-dismiss, bottom sheets, and snap points with configurable positional and velocity thresholds plus automatic fling decay.

Related Skills

Explore More Software Engineering Skills→
po4ykapo4yka
58

android-compose-patterns

Standardize Jetpack Compose UI architecture with Route/Screen separation and StateFlow.

Community
Intermediate
skydovesskydoves
472

generating-baseline-profiles

Generate and validate Jetpack Compose baseline profiles with Macrobenchmark.

Community
Advanced
travisjneumantravisjneuman
88

ui-animation

Guide UI animation principles, timing, easing, and patterns for web and mobile interfaces.

Community
Intermediate
ElvinOuyangElvinOuyang

ios-polish

Apply a structured polish pass to iOS/SwiftUI views for HIG compliance.

Community
Advanced