What is the proper way to animate text changes? `Crossfade` cannot be use inside Row scope ((

# compose

[Yuri Drigin]

What is the proper way to animate text changes? Crossfade cannot be use inside Row scope ((

Untitled.kt

[Doris Liu]

Crossfade should work in RowScope, although it won't automatically change size for you. What is your use case?

[Doris Liu]

Consider adding Modifier.animateContentSize to either Crossfade or Row if you need the size change to be animated.

[Yuri Drigin]

@Doris Liu Yep. You are right. My mistake. It is wrong import of Crossfade. Should be Crossfade(targetState = …)

[ziv kesten]

@Doris Liu I am trying to use crossfade to animate text change but the second text, being shorter then the first, makes a jump to be centered at the end of the animation, i would like it to be centered just like the first text.
How can i prevent that?

Screen Recording 2021-12-28 at 16.46.03.mov

[Doris Liu]

Sorry for the late reply. You'd need to specify content alignment for the text such that they fade in/out while being center aligned. Crossfade doesn't currently support that, but you could consider using AnimatedContent and leverage the contentAlignment parameter.

[ziv kesten]

Oh ok cool, thank you i will try that!🙏