Is it possible to render a scrim using compose with

AnimatedContent

? 🧵👀

In the

AnimatedVisibilityScope

, you can use the

transition

property to create your own animation. See here for example.

Thanks, Ill try that! 👍🏽

Could you file a feature request for this? We can make the initialState accessible from the content block. The scrim animation is a great use case and we want to make it easy. 🙂

Will do! 👏🏽 Heres a link!

Yes. You can get the

initialState

from the Transition if you use the

Transition#AnimatedContent

API. It'd be something like:

val t = updateTransition(..)
t.AnimatedContent(...) {
   // In the content block, remember the current/initialState when the content is first added
   val initialState = remember { t.currentState }
   // Add the scrim animation using AnimatedVisibilityScope#transition
   val scrimAlpha by transition.animatedFloat {
      if (it != Visible && initialState == foo) { 
          0f
      } else {
          if 
      }
   } 
}

So glad I asked! Thank you 😊

You could check the

AnimatedVisbilityScope#transition.targetState

against

PostExit

. What is the result you see?

That almost works! The scrim now animates in correctly, but is then hidden just slightly too early - so while the new content is sliding in from the bottom, the old content has a scrim for 90% of the duration, and the last 10% just renders the old content as white (which is my background color) until the new content covers it entirely. After some more digging, I think this is a bug. I havent noticed it simply due to specifying `targetAlpha=0f`; e.g. if I use the code below, Ill see the content fade out and then just abruptly disappear before the transition is complete (again, at about 90% of the duration). I use the same animationSpec for both transitions (spring), and I can verify that the old content is still part of the composition:

DisposableEffect.onDispose

is called exactly when the transition is complete.

initialContentExit = fadeOut(
    targetAlpha = 0.8f
)

The previous content gets removed whenever the exit transition has finished. It does not wait for the whole transition to finish before removing itself.

so while the new content is sliding in from the bottom, the old content has a scrim for 90% of the duration, and the last 10% just renders the old content as white (which is my background color) until the new content covers it entirely.

This sounds to me like the old content was removed after 90% of the total duration, which is likely due to the exit animation finishing. Can you try using a

tween

with the same duration for enter & exit and see if you still observe the same behavior? It's possible that having the old content stick around until both enter & exit transition finish would be more intuitive.

Tween makes it work as expected, thank you! Personally Id prefer to see the old content stick around until the whole transition finishes, otherwise spring animations are pretty much no use in situations like this.