🌈 Create new beautiful Compose Gradients with our new wesite ->
Composable Function

DeferredAnimatedVisibility

AnimatedVisibility can be used to animate the appearance and disappearance of its content as the Transition state changes.

DeferredAnimatedVisibilitySample

@OptIn(ExperimentalDeferredTransitionApi::class)
@Sampled
@Composable
fun DeferredAnimatedVisibilitySample() {
    // In a real app, these states would be driven by a gesture handler like PredictiveBackHandler
    var visible by remember { mutableStateOf(true) }
    var isBackGestureInProgress by remember { mutableStateOf(false) }
    var swipeOffset by remember { mutableStateOf(IntOffset.Zero) }

    val transitionState = remember { DeferredTransitionState(visible) }
    val transition = rememberDeferredTransition(transitionState)
    LaunchedEffect(isBackGestureInProgress, visible) {
        if (isBackGestureInProgress) {
            transitionState.defer(visible)
        } else {
            transitionState.animateTo(visible)
        }
    }

    transition.DeferredAnimatedVisibility(
        visible = { it },
        mutableTransform =
            MutableTransform { fullSize ->
                if (isBackGestureInProgress) {
                    val progressX = (swipeOffset.x.toFloat() / fullSize.width).coerceIn(0f, 1f)
                    // Shrink the content down to 80% as the user swipes
                    scale = 1f - (progressX * 0.2f)
                    // Slide the content along the swipe
                    offset = swipeOffset
                }
            },
    ) {
        Box(Modifier.size(200.dp).background(Color.Red))
    }
}

AddAnimatedVisibilityToGenericTransitionSample

@Composable
@Sampled
fun AddAnimatedVisibilityToGenericTransitionSample() {

Content updated: