How can I control the direction of AnimatedVisibility in compose?

user_19916282 0
Viewed 49

I have used compose AnimatedVisibility in my project, I want to change direction of AnimatedVisibility for slideInVertically() from bottom to top and slideOutVertically() from top to bottom. How can this be done?

 AnimatedVisibility(
   visible = state.value,
   enter = slideInVertically(),
   exit = slideOutVertically())
    {

        // ...

    }
android-jetpack-compose kotlin android
1 Answers

Use initialOffsetY and targetOffsetY like this to change the animation direction.

enter = slideInVertically(
    initialOffsetY = {
        it / 2
    },
),
exit = slideOutVertically(
    targetOffsetY = {
        it / 2
    },
),

Source: EnterExitTransition.kt source code

This slides in the content vertically, from a starting offset defined in initialOffsetY to 0 in pixels. The direction of the slide can be controlled by configuring the initialOffsetY. A positive initial offset means sliding up, whereas a negative value would slide the content down.

This slides out the content vertically, from 0 to a target offset defined in targetOffsetY in pixels. The direction of the slide-out can be controlled by configuring the targetOffsetY. A positive target offset means sliding down, whereas a negative value would slide the content up.

user_96360370
Related