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

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

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.

@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

@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.

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

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 🙂