https://github.com/mlbonniec/animatednavigationtitle

A SwiftUI package that helps you to recreate X, Github and Reddit animated navigation title scrolling effect.
https://github.com/mlbonniec/animatednavigationtitle

animation github navigation reddit swift swiftui title

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mlbonniec/animatednavigationtitle
• Owner: mlbonniec
• License: cc-by-4.0
• Created: 2024-03-28T20:34:11.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-21T08:39:26.000Z (9 months ago)
• Last Synced: 2024-04-21T09:54:26.127Z (9 months ago)
• Topics: animation, github, navigation, reddit, swift, swiftui, title
• Language: Swift
• Homepage:
• Size: 40 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# 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.

```swift

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](./LICENSE).