skills.rest
ronjunevaldoz
ronjunevaldozCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

kmp-compose-animation

Implements Compose Multiplatform animations including AnimatedVisibility, Crossfade, and shared element transitions.

2|Updated Jun 6, 2026
Search Tags:#animation#kotlin#crossfade#compose multiplatform#reduced motion#animatedvisibility#shared element transition
One-click install
npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-compose-animation-ronjunevaldoz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kmp-compose-animation
Source: https://github.com/ronjunevaldoz/kmp-agent-skills/tree/main/skills/kmp-compose-animation
Command: npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-compose-animation-ronjunevaldoz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and correctly implementing the right Compose Multiplatform animation API is error-prone: developers pick overly complex APIs, forget reduced-motion accessibility, or hit crashes with shared element transitions missing a SharedTransitionLayout. This Skill provides decision guidance and working code patterns for every common animation scenario. ## Core Features & Use Cases - API Selection Guidance: A preference-ordered recommendation ladder (AnimatedVisibility → animateContentSize → Crossfade/AnimatedContent → animateXAsState → shared elements) so you always pick the simplest API for the job. - Ready-to-Use Patterns: Complete composable examples for enter/exit transitions, size animations, state crossfades, property animations, multi-property Transitions, and Compose 1.7+ shared element transitions between list and detail screens. - Accessibility & Testing: Reduced-motion fallbacks via LocalAccessibilityManager, plus Compose UI test and Roborazzi screenshot test patterns for animated content. - Use Case: When building a product list that expands cards on tap and transitions to a detail screen, use this Skill to implement AnimatedVisibility with expandVertically, animateContentSize for height changes, and a shared element transition for the product image. ## Quick Start Ask the agent to add an animated expand/collapse transition with reduced-motion support to a Compose Multiplatform card composable.

Frequently Asked Questions about kmp-compose-animation

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

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

Use AnimatedVisibility with enter and exit transitions such as fadeIn() plus expandVertically() and shrinkVertically() plus fadeOut(). It is the simplest API for showing or hiding a composable with a transition.

Which Compose animation API should I use for my UI?▼

Pick the simplest API that achieves the goal: AnimatedVisibility for show/hide, animateContentSize for height or width changes, Crossfade or AnimatedContent for swapping composables, animateXAsState for single property values, and shared elements only for connected list-detail navigation.

How do shared element transitions work in Compose Multiplatform?▼

Shared element transitions require Compose 1.7+ and a SharedTransitionLayout wrapping the NavHost. Both source and destination composables call sharedElement with a matching rememberSharedContentState key, using the LocalSharedTransitionScope and LocalNavAnimatedContentScope composition locals.

Does Compose animation support reduced motion accessibility?▼

Yes, check LocalAccessibilityManager.current?.isReduceMotionEnabled before applying non-trivial animations. When reduced motion is enabled, render content instantly instead of animating to support users with vestibular disorders.

Why does my animation restart inside a LazyColumn?▼

Animations restart because LazyColumn recycles items without stable keys. Always provide key = { item.id } in the LazyColumn items block so Compose preserves item state and animation progress across recompositions.

Can I use animateContentSize on a LazyColumn?▼

No, animateContentSize does not work on LazyColumn because it manages its own height and virtualizes content. Use animateContentSize only on layout containers whose content fits in memory, such as Column or Card.

Related Skills

Explore More Software Engineering Skills→
WanderTheWeebWanderTheWeeb
1

tweens

Animate object properties over time in Phaser 4 using TweenManager.

Community
Advanced
shaharKeisarAppsshaharKeisarApps

Shared Element Transitions Skill

Morph shared UI components across Jetpack Compose screens with SharedTransitionLayout.

Community
Advanced
mmartinsolivmmartinsoliv

animation

Design UI animations with transform and opacity effects and reduced-motion fallbacks.

Community
Intermediate
519lab519lab
2

hyperframes

Convert HTML compositions into animated videos with GSAP, audio, and captions.

Official
Advanced