In a sliding content transition, is there any way ...

# compose

[Chuck Stein]

In a sliding content transition, is there any way to target an absolute X or Y value, rather than an offset? For example, in this animation I want the purple search button to slide up to the position where the text field appears in the top app bar. Right now I just guessed and hardcoded an offset that looks about right, but there is still a jump cut at the end of the animation (if you look at the top of the chip group) because it's slightly too low. I also doubt this magical hardcoded offset will get it to the same position at the top of the screen on all device screen sizes.

21-08-21-19-10-46.mp4

[Doris Liu]

Are you using slide + fade for the exit transition?

Assuming good-morning Text and search bar are in a Column, I would move the Column in an AnimatedVisibility and use shrinkVertically(shrinkTowards = <http://Alignment.Top|Alignment.Top>) + fadeOut() to achieve that slide.

[Chuck Stein]

Yes, using slide + fade, but unfortunately the search bar + chip group are within their own column deeper in the compose hierarchy than the greeting text column, because the search bar + chip group are one of a series of steps in a flow, whereas the greeting text is persistent throughout each step in that flow, so the latter is part of a composable wrapping whatever the current step is. So I'm not exactly sure how to coordinate this animation throughout the different levels of the compose hierarchy

[Doris Liu]

The easiest way to do it, given your hierarchy, would be to have a sequential animation:
1) Greeting text would exit first with a shrinkVertically, this will bring the search bar and chip group up.
2) After that, fade + slide in the top bar "Search queries" text while shrink + fadeOut the search bar.

The sequencing can be done by either adding a delay to the 2nd set of animations, or observe the state of the greeting text exit animation and animate the 2nd set when it finishes. You could use the AnimatedVisibility(MutableTransitionState) API to make the animation states of AnimatedVisibility observable.

[Chuck Stein]

Thanks, I actually did end up doing pretty much the same thing with those 2 different parts using a delay, since you got me thinking how could I make it effectively look like I'm shrinking out a single column containing both the greeting text and search bar. To make it look fluid I had to tween with LinearEasing so that the two parts looked like one, but I think it still looks pretty good. Good to know this is the best approach for my scenario

21-08-23-14-50-47.mp4

[Doris Liu]

That looks pretty neat! 👍