How to implement Shared Element Transitions across Workflow screens

[balao7]

Hi everyone 👋

I'm currently designing a navigation for my app — focused on a single-activity architecture with support for stacked Workflows and Composable UI rendering.

❓The Problem
I’d like to add Shared Element Transitions between two Workflow screens, for example:

ListWorkflow → DetailWorkflow

Where an image or card animates smoothly between screens.

🔍 What I’m Looking For

1. Has anyone implemented shared transitions in a custom navigation system (without Navigation Compose)?
2. What’s the best way to coordinate element transitions across two Workflow-based screens?
3. Would it be better to explore MotionLayout for fine-grained control?

Any alternative to Accompanist’s shared elements now that it’s deprecated?

Appreciate any input, ideas, or references — especially if you’ve built a similar architecture in Compose with custom workflow or stack-based UI flows.

Looking forward to learning from the community!

[vRallev]

I hope this helps. App Platform was heavily inspired by Workflow, so perhaps the solution can be translated.

My proposal was to setup a SharedTransitionLayout and AnimatedContent close to the root of the Compose UI layer. Composable get access to these through composition locals, which the Compose documentation highlights. The important piece is that you have to bubble up in some way or another that a specific change in the model should be animated. For this in my example the models can expose a contentKey that highlights when something should be animated. This is the sample PR: amzn/app-platform#37

I'm unsure how well this scales, but I also haven't found a blocker yet where this approach breaks apart.

[balao7]

Thanks for sharing! @vRallev This is amazing.