swiftuinavigationtransitions
  • December 4, 2023

 

NavigationTransitions is a library that integrates seamlessly with SwiftUI’s NavigationView and NavigationStack, allowing complete customization over push and pop transitions!

Overview


Instead of reinventing the entire navigation stack just to control its transitions, NavigationTransitions ships with a simple modifier that can be applied directly to SwiftUI’s very own first-party navigation components.

The Basics

iOS 13+

NavigationView {
// …
}
.navigationViewStyle(.stack)
.navigationTransition(.slide)

iOS 16+

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

The API is designed to resemble that of built-in SwiftUI Transitions for maximum familiarity and ease of use.

You can apply custom animations just like with standard SwiftUI transitions:

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

You can combine them:

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

And you can dynamically choose between transitions based on logic:

.navigationTransition(
reduceMotion ? .fade(.in).animation(.linear) : .slide(.vertical)
)

Transitions

The library ships with some standard transitions out of the box:

In addition to these, you can create fully custom transitions in just a few lines of SwiftUI-like code!

struct Swing: NavigationTransition {
var body: some NavigationTransition {
Slide(axis: .horizontal)
MirrorPush {
let angle = 70.0
let offset = 150.0
OnInsertion {
ZPosition(1)
Rotate(.degrees(-angle))
Offset(x: offset)
Opacity()
Scale(0.5)
}
OnRemoval {
Rotate(.degrees(angle))
Offset(x: -offset)
}
}
}
}

The Demo app showcases some of these transitions in action.

Interactivity

A sweet additional feature is the ability to override the behavior of the pop gesture on the navigation view:

.navigationTransition(.slide, interactivity: .pan) // full-pan screen gestures!

This even works to override its behavior while maintaining the default system transition in iOS:

.navigationTransition(.default, interactivity: .pan) // ✨

Documentation

 

 

GitHub


View Github

#animation #native #navigation #swiftui #transition
YOU MIGHT ALSO LIKE...
FigmaPreviewSwiftUI

A Figma component preview for your SwiftUI views. You can use Figma components instead of real views within your app ...

SafePreviewDevice

Motivation At WWDC 2019, Apple announced SwiftUI a new library for building UI in a simple and fast way. Xcode’s ...

PreviewView

Make use of SwiftUI previews for rapidly prototyping your UIViewControllers and UIViews! The SwiftUI preview canvas is tied to a specific version of ...

PreviewDevice

Requirements   Dev environment: Xcode 13+, macOS 12+ iOS 13.0+, macOS 10.15+, Mac Catalyst 13.0+, tvOS 13.0+, watchOS 6.0+ Usage

SwiftUIWheelPicker

Horizontal wheel picker for SwiftUI Requirements iOS 13.0+ Installation CocoaPods