Im investigating an animation issue in one of my a...
# compose
z
Im investigating an animation issue in one of my apps. Navigating backwards twice results in the exiting content fading out, but I dont have any fade specified for exiting content. More details in 🧵
Im using
tween(500)
to rule out any Spring/VisibilityThreshold issues. Forward:
slideInVertically togetherWith scaleOut
Backward:
scaleIn + fadeIn togetherWith slideOutVertically
The AnimatedContent usage is a bit involved so I wont post the entire thing here, the gist of it is that Im calculating a
Frame(content, index, key)
for each entry passed into my composable and then using
targetState=topFrame
. In the transitionSpec I just check if(targetIndex>initialIndex) Forward else Backward, etc.
I can do back, forward, back and everything is fine.
It seems somewhat linked to mixing the types of animations between enter/exit. For example, if I just have slideHorizontally for both enter/exit, it never breaks. As soon as I introduce scale/fade/etc + slide, it breaks. Bug?
a
I think what happened is not exiting content fading out, but entering content fading in above exiting content. I'm not sure why it only happens in the second backwards transition, but you can check if specifying a appropriate
targetContentZIndex
solves the problem.
z
That seems logical. Im specifying
targetContentZIndex=500f
for the forward animation, the backwards one never specifies one (so 0). Maybe thats incorrect though? Ive tried using the index of the element for it but saw the same behavior then.
Thank you For the backwards animation I had supplied initialState.index as the zIndex, obviously I should use targetState. It now works, and its beautiful.. thanks for the help 🙂
👍 1
Ive been coming back to this every quarter or so, throwing new solutions at it thinking that it was either a bug in compose itself, or me doing funky stuff elsewhere that was causing it (partially true previously.. now too I guess). So glad to finally have it working as it should, so many people will benefit from this. Thanks 😃