[FIXED] Compose – AnimatedVisibility and offset

Issue

When adding an enter and exit transition to AnimatedVisibility, if the composable animated has an offset modifier, the transition is not visible:

AnimatedVisibility(
            visible = visible,
            enter = fadeIn(animationSpec = tween(1000)),
            exit = fadeOut(animationSpec = tween(1000))
        ) {
            Text(
                text = "Hello, world!", modifier = Modifier
                    // This will make the transition not working
                    //.offset(100.dp, 0.dp)
            )
        }
        Button(onClick = { visible = !visible }) {
            Text("Click Me")
        }

This is the animation without the offset:

and this is the animation with the offset:

Is there a way to make it work?

Solution

Don’t out the offset modifier onto the Text. Put it onto AnimatedVisibility instead:

AnimatedVisibility(
            visible = visible,
            enter = fadeIn(animationSpec = tween(1000)),
            exit = fadeOut(animationSpec = tween(1000)),
            modifier = Modifier.offset(100.dp, 0.dp)
        ) {
            Text(text = "Hello, world!")
        }

Answered By – user496854

Answer Checked By – Terry (FixeMe Volunteer)