4

I want to animate some text's visibility to not just appear/disappear but to slide in/out in Jetpack Compose Android app that I'm building.

I just literally copy-pasted that little code snippet from developer.android.com/jetpack/compose/animation and it does not work:

var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically {
        // Slide in from 40 dp from the top.
        with(density) { -40.dp.roundToPx() }
    } + expandVertically(
        // Expand from the top.
        expandFrom = Alignment.Top
    ) + fadeIn(
        // Fade in with the initial alpha of 0.3f.
        initialAlpha = 0.3f
    ),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    Text("Hello", Modifier.fillMaxWidth().height(200.dp))
}

It simply does not animate, the text gets shown/hidden without any animation.

Any ideas what can be the problem?

I guess I can't paste my whole app here, as it would be silly, it would be nice of Google to give us a Jetpack Compose Playground of sorts, to be able to practice and test code there...

Milos
  • 168
  • 2
  • 12
  • 1
    I tried your code and its animating properly, so its hard to guess what's wrong in it, maybe its has something to do with its height or the height of where it animates, the bigger it is the faster it will transition, or maybe the phone's developer settings has animations set to disabled, just guessing – z.g.y Oct 21 '22 at 13:43
  • I dunno where was the problem, but after a lot of rewriting of my composable functions and refactoring stuff, it just started to work nicely, just ignore this whole post, sorry – Milos Oct 21 '22 at 23:24
  • 3
    You were using a state variable with the overload which uses a regular boolean to activate animation, there is a version of AnimatedVisibility that has "visibilityState" as its first parameter, could that have been your problem? – Arthur Kasparian Oct 22 '22 at 17:28
  • I'm not sure if AnimatedVisibility can be used without a state variable var visible by remember { mutableStateOf(true) } ? – Milos Oct 25 '22 at 07:27
  • 2
    @ArthurKasparian I had a similar issue your comment made it work. I am new to compose and I wanted to run the animation as soon as it is added to the tree and visibilitystate is the right approach. – anshul Feb 23 '23 at 19:03
  • 1
    @anshul it actually is not (if I understood your case correctly), MutableTransitionState is what you should be using when animating visibility on entrance, you can check [here](https://developer.android.com/jetpack/compose/animation#enter-exit-transition), the codeblock under the transitions table! – Arthur Kasparian Feb 23 '23 at 23:14
  • 3
    @ArthurKasparian Sorry if I confused you. Yes, I am using MutableTransitionState in my case. I meant that earlier I was using AnimatedVisibility with a visible parameter which did not work. then I figured out that I should have been using AnimatedVIsibility with visibilityState as a param by passing MutableTransitionState and it worked. – anshul Feb 24 '23 at 17:16

1 Answers1

-2

Use visibleState param instead of visible into AnimatedVisibility().

IlyaFromRussia
  • 102
  • 3