Why my right edge of the Box in Compose is vibrating while expanding and collapsing?

Question

Animation is not at all smooth enough, it is just like lagging

Here I am using a simple box, I am expanding its width using animateFloatAsState . Without any animation of its inside element, it is not at all smooth enough. Where I am doing wrong?

Code:

 import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.animation.core.* import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color class TestClassTwo: ComponentActivity() { private var isExpandedSavingCard by mutableStateOf(true) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val savingCardWeight = remember { mutableStateOf(0.50f) } val animation = animateFloatAsState( targetValue = savingCardWeight.value, animationSpec = tween( durationMillis = 400, easing = LinearEasing ) ) Box(modifier = Modifier.fillMaxWidth(animation.value).fillMaxHeight(0.5f).clickable { isExpandedSavingCard =.isExpandedSavingCard savingCardWeight.value = if (isExpandedSavingCard) 0.50f else 1f }.background(color = Color Blue)) { } } } }

Answer 1

This is the problem in jetpack compose till now but you can reduce lagging effect by changing two line of code

from

durationMillis = 400, easing = LinearEasing

To

durationMillis = 2000, easing = LinearOutSlowInEasing

Note -> durationMillis = 2000 just for increase time of animation you can use any time above 1000 ms