Shared Element Transitions Skill

Name: Shared Element Transitions Skill
Availability: InStock
Author: shaharkeisarapps

Morph shared UI components across Jetpack Compose screens with SharedTransitionLayout.

Updated Jan 11, 2025

Search Tags:#UI #animation #transitions #Jetpack-Compose #motion-pattern #shared-element

Ready to run

npx skills add https://github.com/shaharKeisarApps/MoviesAndBeyond --skill shared-element-transitions-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Shared Element Transitions Skill
Source: https://github.com/shaharKeisarApps/MoviesAndBeyond/tree/main/.claude/skills/shared-elements
Command: npx skills add https://github.com/shaharKeisarApps/MoviesAndBeyond --skill shared-element-transitions-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the friction of creating visually continuous transitions between screens by morphing shared UI components in Jetpack Compose, delivering a premium feel without manual tween logic.

Core Features & Use Cases

SharedTransitionLayout: A root container that coordinates element morphs across screens.
SharedTransitionScope & AnimatedVisibilityScope: Primitives to tag and animate participating elements.
Patterns & Recommendations: Includes Fade Through and shared bounds transitions for image-heavy content; supports list-to-detail and card expansion flows.

Quick Start

Add SharedTransitionLayout to your root navigation and wrap shared elements with unique keys; navigate from list to detail to observe morphing.

Frequently Asked Questions about Shared Element Transitions Skill

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

FAQPage Schema

How do I implement shared element transitions in Jetpack Compose?▼

To implement shared element transitions in Jetpack Compose, wrap your root navigation in SharedTransitionLayout and tag morphing UI components with unique keys using SharedTransitionScope and AnimatedVisibilityScope. This coordinates seamless visual continuity across screens without manual tween logic.

What is the best way to animate a list to detail flow in Jetpack Compose?▼

The best way to animate a list to detail flow is using shared bounds transitions. By wrapping participating elements in a SharedTransitionLayout and navigating between screens, UI components morph continuously, delivering a premium visual feel for list-to-detail and card expansion patterns.

Do I need SharedTransitionScope and AnimatedVisibilityScope to morph UI components in Compose?▼

Yes, SharedTransitionScope and AnimatedVisibilityScope are required primitives to tag and animate participating elements. They work alongside SharedTransitionLayout and Compose animation libraries to properly morph UI components across screens within a single navigation flow.

Does SharedTransitionLayout support image zoom and card expansion animations?▼

Yes, SharedTransitionLayout supports image zooms and card expansions by applying Fade Through and shared bounds transitions. It coordinates element morphs across screens, making it ideal for image-heavy content and common navigation flows in Jetpack Compose apps.

Why do my UI components fail to morph continuously across navigation screens?▼

UI components fail to morph continuously if they lack unique keys within a SharedTransitionScope or if the root container is missing a SharedTransitionLayout. Proper element morphing requires these constructs alongside AnimatedVisibilityScope and Compose animation libraries.