Is there a way to crossfade between two using an Animatable? I’d like to transition between two Comp...

# compose

[Jonathan]

Is there a way to crossfade between two using an Animatable? I’d like to transition between two Composable as a drag gesture is performed. The Crossfade composable seems to only offer a binary API and doesn’t allow for controlled fading based on an animating value…
I believe could achieve what I want using Modifier.graphicLayer { alpha = animatedAlpha } and Modifier.graphicLayer { alpha = 1 - animatedAlpha } in my two Composables but then both Composables would still be in compositions and I would need to disable gestures on the invisible one. Any advice would really be appreciated.

[Stylianos Gakis]

Use https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/animation/animation/src/commonMain/kotlin/androidx/compose/animation/AnimatedContent.kt;l=132;bpv=1;bpt=1?q=AnimatedContent and pass in fadeIn and fadeOut as the spec perhaps?

[Jonathan]

Is AnimatedContent seekable? The parameters of a targetValue is similar to CrossFade

[Stylianos Gakis]

Yup. Here's an example, driven by a seekable transition:
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/NavHost.kt;l=608?q=NavHost

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/NavHost.kt;l=654?q=NavHost