mlbonniec / AnimatedNavigationTitle

A SwiftUI package that helps you to recreate X, Github and Reddit animated navigation title scrolling effect.

AnimatedNavigationTitle

AnimatedNavigationTitle is a simple SwiftUI package that helps you to create animated navigation title, based on the current scroll position. It's inspired by the animations present on X, Github and Reddit iOS application.

This works as well with simple ScrollView as it does with List.

Note

AnimatedNavigationTitle is available on iOS 15 and later.

Quick Start

To create an animated title view, you must wrap your view with AnimatedNavigationTitleView. Then, you must add the .scrollableTitleAnchor() modifier to the child view that will trigger the animation.

AnimatedNavigationTitleView("My Custom Title") {
  VStack {
    Text("Hello, World")

    Spacer(minLength: 250)

    Text("Trigger")
      .scrollableTitleAnchor()

    Spacer(minLength: 250)

    Text("…")
  }
}

Configuration

Animation

You can specify which animation(s) will be played by passing the animation: AnimatedNavigationTitleAnimationType parameter to the AnimatedNavigationTitleView.

Examples:

• AnimatedNavigationTitleView("Title", animation: .slide) {} title sliding from the bottom. (the default behavior)
• AnimatedNavigationTitleView("Title", animation: .opacity) {} title will appear by increasing its opacity.
• AnimatedNavigationTitleView("Title", animation: .all) {} both slide and opacity.

Alignment

Title content alignment can also be configured.

Examples:

• AnimatedNavigationTitleView("Title", alignment: .leading) {}
• AnimatedNavigationTitleView("Title", alignment: .center) {}
• AnimatedNavigationTitleView("Title", alignment: .trailing) {}

Todo

• Add option to display title instantly

License

This work is licensed under CC BY-SA 4.0. See LICENSE.