Can someone explain me how I can create an animati...

# compose

[bodo]

Can someone explain me how I can create an animation in a composable function which will be executed every time the composable is called

@Composable
fun ShowAnimatedHeader(oldTitle: String, newTitle: String) {
   Box {
      AnimatedVisibility(visible = false, exit = slideOutVertically()) {
         Text(text = oldTitle)
      }
      AnimatedVisibility(visible = true, enter = slideInVertically()) {
         Text(text = newTitle)
      }
   }
}

Every time the oldTitle or newTitle change i want to animate the old one out and the new one in. but it is only executed the first time the composable is called

[Adam Powell]

played around with this a bit for fun: https://gist.github.com/adamp/1b2ae2020c3e2c4b95299a339b413b46

[Adam Powell]

probably not production-hardened, but it shows the basics of the effect. It also illustrates the use case for the, "composition as a value" feature we're currently working on

[Adam Powell]

for your animated header example, you would call the composable from the gist like this:

ContentSlider(newTitle) { title ->
  Text(title)
}

[Doris Liu]

If the oldTitle and newTitle are two fixed titles that you always switch in between, I would recommend toggling the visible booleans for both based on which one is showing. Though based on your description, it sounds more like the titles can change arbitrarily, in which case I'd go with Adam's suggestion above. We were considering an API like fun <T> AnimatedVisibility(contentState: T, enter:.., exit:.., content: @Composable (T) -> Unit) , which would solve use cases like this. Unfortunately we have not got around to building it. The shape of that API coincides with the ContentSlider composable proposed above.

One tricky detail to note is that if you are changing the titles arbitrarily, it's best to keep track of all of the old titles that haven't finished animating yet. By only tracking oldTitle and newTitle, you might end up having an animating old title snaps to disappearance when it was replaced by a different oldTitle. "Composition as a value" that Adam mentioned could potentially allow us to track all of those old composition values as we animate them out. But until then, you might want to be aware of this.

[Adam Powell]

@Doris Liu if there's a better way to write something like ContentSlider there using the new updateTransition API I didn't find it 😅 that was the first thing I reached for; I was hoping I had found a good excuse to take it for a spin

[Doris Liu]

@Adam Powell Aww I appreciate that. 😄 The animating-out-obsolete-content is a category of its own that we don't have good coverage yet. But I could see "composition as a value" making that much more straightforward.

[Adam Powell]

updated the gist at https://gist.github.com/adamp/1b2ae2020c3e2c4b95299a339b413b46 to also include a v2 with all of the internal state hoisted. Also allows for customizing the animation behavior both in terms of the AnimationSpec and the behavior of the graphics layers performing the slide/fade

[Adam Powell]

it made me realize that GraphicsLayerScope should itself implement `Density`; something to file for the new year 😄

[bodo]

thx for all the answers. you really give me the right direction. i don´t understand all details so i think i have to learn a lot concerning compose 🙂