Usage Guide

This guide covers the primary features of the library, including customizing animations, combining transitions, and controlling interactivity.

Applying a Transition

The core of the library is the .navigationTransition() view modifier. You apply it to a NavigationStack or a NavigationView with the .stack style.

NavigationStack { ... }
    .navigationTransition(.slide)

The library includes several built-in transitions like .slide and .fade. See the API Reference for a full list.

Customizing Animations

Just like SwiftUI's native transitions, you can attach a custom animation to your navigation transition. This allows you to control the duration, curve, and physics of the animation.

Duration and Easing

To specify a duration and an easing curve, use the .animation() modifier with a standard Animation type.

.navigationTransition(
    .fade(.in).animation(.easeInOut(duration: 0.4))
)

Spring Animations

For more dynamic, physics-based animations, you can use a spring.

.navigationTransition(
    .slide.animation(
        .interpolatingSpring(stiffness: 300, damping: 25)
    )
)

Combining Transitions

You can create more complex effects by combining multiple transitions using the .combined(with:) method. The transitions are layered on top of each other.

For example, to make a view slide in while also fading in:

.navigationTransition(
    .slide.combined(with: .fade(.in))
)

Dynamic Transitions

Since the .navigationTransition() modifier accepts a standard view property, you can dynamically change the transition based on your app's state.

@State private var reduceMotion = false

// ...

NavigationStack { ... }
    .navigationTransition(
        reduceMotion ? .fade(.in).animation(.linear) : .slide
    )

Controlling Interactivity

A powerful feature of this library is the ability to customize the pop gesture's interactivity.

The interactivity parameter of the .navigationTransition() modifier accepts one of three values:

• .disabled: Disables the interactive pop gesture entirely.
• .edgePan: The default behavior. The pop gesture can only be initiated from the leading edge of the screen.
• .pan: Allows the pop gesture to be initiated by panning from anywhere on the screen.

Full-Screen Pop Gesture

You can enable a full-screen pop gesture for any transition, including the default system animation. This provides a great user experience without having to change the transition's visual style.

// Use the default system transition but with a full-screen pop gesture
.navigationTransition(.default, interactivity: .pan)

// Use a custom slide transition with a full-screen pop gesture
.navigationTransition(.slide, interactivity: .pan)