Hello, is there a way to achieve such an animation...

# compose

[Radoslaw Juszczyk]

Hello, is there a way to achieve such an animation with AnimatedContent?

whatever I use it appears like it scales in / scales out

Screen Recording 2024-01-18 at 1.29.05 PM.mov

[Fabricio Vergara]

AnimatedContent(
            targetState = expanded,
            transitionSpec = {
                slideInVertically(
                    initialOffsetY = { -it }
                ) togetherWith slideOutVertically(
                    targetOffsetY = { -it }
                )
            }
        ) { target ->
            Box(modifier = Modifier.fillMaxWidth()) {
                if (target) {
                    Text("Lorem ipsum")
                }
            }
        }

idk the specifics of your needs, but it might work

[Radoslaw Juszczyk]

no the above code results with a different animation:

Screen Recording 2024-01-18 at 2.37.15 PM.mov

[Radoslaw Juszczyk]

it scales up form the left top corner:

[Fabricio Vergara]

almost! 😅

[Radoslaw Juszczyk]

I was trying this code:

AnimatedContent(
            isExpanded,
            transitionSpec = {
                ContentTransform(
                    EnterTransition.None,
                    ExitTransition.None,
                    sizeTransform = SizeTransform(
                        sizeAnimationSpec = { initialSize, targetSize ->
                            val spring = spring<Int>(visibilityThreshold = IntSize.VisibilityThreshold.height)

                            object: FiniteAnimationSpec<IntSize> {
                                override fun <V : AnimationVector> vectorize(converter: TwoWayConverter<IntSize, V>): VectorizedFiniteAnimationSpec<V> {
                                    return spring.vectorize(object : TwoWayConverter<Int, V> {
                                        override val convertFromVector: (V) -> Int
                                            get() = {
                                                
                                                converter.convertFromVector(it).height }
                                        override val convertToVector: (Int) -> V
                                            get() = {
                                                converter.convertToVector(IntSize(maxOf(targetSize.width, initialSize.width), it)) 
                                            }  
                                    })
                                }
                            }
                        }
                    )
                )
            },
        ) {
            if (it) {
                Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")
            }
        }

but it still scales up from the left top corner

I think i do not understand how vectorize works

[Vaibhav Jaiswal]

You can try Modifier.animateContentSize()

[Radoslaw Juszczyk]

yup but it will animate both width and height together

[Vaibhav Jaiswal]

@Radoslaw Juszczyk if you set fillMaxWidth(), it would take full width and hence animate only height

[Radoslaw Juszczyk]

ahh but i need to wrap it in a Box then

[Radoslaw Juszczyk]

ok let me try it

[Doris Liu]

AnimatedVisibility would be much simpler to do the job. With AnimatedVisibility, I'd specify:
enter = expandVertically(expandFrom = Alignment.Bottom) and exit = shrinkVertically(shrinkTowards = Alignment.Bottom)

Perhaps you intend to swap in other content with the use of AnimatedContent? You could also disable the size animation in AnimatedContent by sizeTransform = null , and use the enter and exit I mentioned above to achieve the same effect.