Hello all! :wave: Could you point me to the right...

# compose

[josefdolezal]

Hello all! 👋 Could you point me to the right direction with animating position of composable? I am trying to animate text and it’s position based on isLoading variable alongside animating progress indicator’s visibility

Screen Recording 2021-09-11 at 0.02.05.mov

[Colton Idle]

I'm assuming you have something like this

Column{
Loader()
Text()
}

so you could put animateContentSize() modifier on the Column as a modifier. Then you just need a Crossfade on the text composable?

[Colton Idle]

animate content size:

https://youtu.be/7yY2OocGiQU?t=219▾

[Colton Idle]

Crossfade:

https://youtu.be/7yY2OocGiQU?t=240▾

[josefdolezal]

I am not sure if I can use animateContentSize in my case, I put together a gist here: https://gist.github.com/josefdolezal/5583dec554e4341cbf39ddc133010545

[josefdolezal]

The loader should be centered in the empty space, which I think I have to do with .weight but then I think I am not able to animate content size

[Doris Liu]

Ah, the animatePlacement concept I've been working on could've been useful for this case, since you can think of the Loading/Done text as changing from bottom aligned to center aligned. Wouldn't it be nice if the text that's going through an alignment change can animate to the new position. 😛

While that's not available yet, I'd recommend achieving that with a varying weight spacer. So you could have something like:

Box(Modifier.weight(1f)) {
    Loader()
    Column {
       Spacer(Modifier.weight(1f))
       Crossfade(..) { .. }
       val bottomWeight by animateFloatAsState(if(isLoading) 0f else 1f)
       if (bottomWeight > 0f) {
          Spacer(Modifier.weight(bottomWeight))
       }
    }
}

[josefdolezal]

🤯 works just the way I wanted! Thanks 👏! Animating alignment was my first thought, but I couldn’t find a way to actually animate it. Good to know you folks are exploring possibilities to have it supported.