Compose - AnimatedVisibility stop working

Question

I was trying to add an animation to a @Composable and suddenly it stop worked, the animation I want to do is when scrolling a LazyColumn so I have this :

Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight()
                .background(White)
        ) {

            val visible = remember {
                MutableTransitionState(false).apply {
                    targetState = true
                }
            }
            val fabHeight = 64.dp
            val fabHeightPx = with(
                LocalDensity.current
            ) {
                fabHeight.roundToPx().toFloat()
            }
            val fabOffsetHeightPx = remember { mutableStateOf(0f) }
            val nestedScrollConnection = remember {
                object : NestedScrollConnection {
                    override fun onPreScroll(
                        available: Offset,
                        source: NestedScrollSource
                    ): Offset {
                        //Some checks and get the anyValue
                        visible.targetState = anyValue < 0
                        return Offset.Zero
                    }

                    override fun onPostScroll(
                        consumed: Offset,
                        available: Offset,
                        source: NestedScrollSource
                    ): Offset {
                        //Some checks but I assign the value as this
                        visible.targetState = true
                        return super.onPostScroll(consumed, available, source)
                    }
                }
            }
            LazyColumn(
                modifier = Modifier
                    .padding(start = 16.dp, end = 16.dp, top = 16.dp)
                    .nestedScroll(nestedScrollConnection)
                    .align(Alignment.TopCenter),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
             ....

And this is the AnimatedVisibility

AnimatedVisibility(
                visible = visible.currentState,
                enter = fadeIn(),
                exit = fadeOut(),
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .padding(bottom = 16.dp),
            ) {
                Text(text = "Hello")
            }
        }

What I'm missing?

Answer 1

Try using:

var visible by remember { mutableStateOf(false) }

The AnimatedVisibility works reacting to a simple boolean value.