Is it possible to specify that a `ContentTransform...

# compose

[Zoltan Demant]

Is it possible to specify that a ContentTransform and/or SizeTransform should only animate size changes for height when used with AnimatedContent?

[Zoltan Demant]

I delay showing my loading indicator, and if content is loaded fast enough, the animation is between nothing and content, so size changes are 0% -> 100% and that just ends up looking like the content is coming in from the left since its old width was 0. I need to use SizeTransform for other reasons, otherwise that would work to fix this too.

[Doris Liu]

There are a few solutions that might work for you:

1. Specify the SizeTransform using keyframes so that in the first frame of the animation, the width is set to the target width

// enum class CartState { Expanded, Collapsed }
val transitionSpec: AnimatedContentTransitionScope<CartState>.() -> ContentTransform =
    {
        // Fade in with a delay so that it starts after fade out
        fadeIn(animationSpec = tween(150, delayMillis = 150))
            .togetherWith(fadeOut(animationSpec = tween(150)))
            .using(
                SizeTransform { initialSize, targetSize ->
                        keyframes {
                            durationMillis = 500
                            // Set to full target width immediately
                            IntSize(targetSize.width, initialSize.height) at 0
                        }
                }
            )
    }

2. Use fillMaxWidth on loading indicator, so that the width doesn't change when the content comes in. This would only work if the content fills the max width allotted by parent.

or 3. Allow the size animation, but not move the horizontal position of the content. To achieve that you could add wrapContentWidth(Alignment.Start, unbounded = true) to your content so that it doesn't center itself in the changing sized container, but rather gets anchored to the starting edge (i.e. left edge in LTR) of the parent.

[Zoltan Demant]

Sweet, til about #3 as well. Thank you @Doris Liu!

[Zoltan Demant]

Hey @Doris Liu I hope its okay that I ping you for a follow-up question to this? I chose approach #2, so specifying Modifier.fillMaxWidth() on the loader - and it makes sense that this would work .. however, it does not .. I also need to use SizeTransform(clip=false), which caught me completely off guard. Maybe Im just misunderstanding what clip does, or do you agree that this is odd? The only logical explanation I can think of is that the loader never has a chance to show up before content is loaded; but Im still not sure how/why clip=false would solve that 😅

[Doris Liu]

Could you share a video of what it looks like without specifying clip = false ?

[Zoltan Demant]

Sorry, I was using Modifier.animateContentSize() on the parent composable, which in turn was causing this (both of the animations were using the same SizeTransform, so clip solved it in both cases).