Buggy navigation bar animation

[codenyte]

Bug Description

Instead of smoothly jumping from one navigation item to another, it jumps to the navigation item in between, then jumps back and only then jumps to the actual selected navigation items.

https://github.com/thunder-app/thunder/assets/39193783/3b72f3cf-587e-4140-b493-81dc3210e65e

Expected Behaviour

Smoothly animate jumping from the current navigation item to the selected navigation item

Steps to Reproduce

1. Click a navigation item
2. Click on another navigation item with one item in between

Additional Context

I've never seen this bug in any other app that uses a Material 3-style navigation bar, does Thunder use Flutter's NavigationBar component, or does it use a custom implementation?

App Version

v0.3.0-3

Device

Pixel 6a

OS

Android 14 (GrapheneOS)

[micahmo]

@codenyte

Thanks for the bug report! Just to clarify, are you talking about how Thunder scrolls through all the pages? For example, if I'm on Feed and I tap on Settings, it will scroll through Search, Account, and Inbox? If that's not what you're talking about, maybe you can submit a screen recording to demonstrate the issue.

BTW, for the other MD3 apps you use which don't have this issue, do they have an animation to scroll to the selected page, or do they just "jump" to it instantly?

[hjiangsu]

It sounds like this might be from the "scroll through pages". I was looking more closely at MD3 guidelines, and they seem to mention that the pages should "jump" to the given page instantly.

https://github.com/thunder-app/thunder/assets/30667958/7117fb7b-5fcb-4fff-b3f8-3720f481f367

See here: https://m3.material.io/components/navigation-bar/guidelines#8fdee610-b49b-47e0-85b7-f4abb86333e7

[codenyte]

@codenyte

Thanks for the bug report! Just to clarify, are you talking about how Thunder scrolls through all the pages? For example, if I'm on Feed and I tap on Settings, it will scroll through Search, Account, and Inbox? If that's not what you're talking about, maybe you can submit a screen recording to demonstrate the issue.

BTW, for the other MD3 apps you use which don't have this issue, do they have an animation to scroll to the selected page, or do they just "jump" to it instantly?

I never realized that this was a feature, not a bug. The scrolling through pages animation doesn't look that bad, it just looks really strange on the navigation bar, which led me to believe it's a bug.

[codenyte]

Oh I just realized that I wanted to include a screen recording when I opened this issue, but then forgot to do so

Edit: I included the screen recording in my original comment

[hjiangsu]

I never realized that this was a feature, not a bug. The scrolling through pages animation doesn't look that bad, it just looks really strange on the navigation bar, which led me to believe it's a bug.

There's currently a way to disable this by going to Settings -> Accessibility -> Reduce Animations. However, this option also does a couple more things which might or might not be desire-able (faster animation when navigating, removing the over-scroll effect, etc.)

I do this this topic brings up a bigger discussion on how closely we should try to abide by MD3 guidelines. One case was with the navigation bar labels (which we switched to be on by default). Should we do the same here?

[codenyte]

Ok so the scrolling through pages might not be a bug, but a feature instead. But there's still a small issue with it: It doesn't seem to smoothly scroll through the individual navigation items, but rather jump to the nav item in between and then jump to the destination nav item. I included a shorter, more specific version of my original screen recording which shows this pretty well.

https://github.com/thunder-app/thunder/assets/39193783/8df1f1d4-86c0-498b-bfe2-60ac13a099ac

In this video, I currently have Search selected, and I click on Inbox. The animation jumps to Inbox, then jumps to Account and then back to Inbox. I don't think this is supposed to be the case.

Btw I'm absolutely fine with the scrolling through pages animation, it's not compliant with the Material Design guidelines, but that's up to you.

[codenyte]

Btw, thanks for all the great work and effort you put into this amazing app. @hjiangsu @micahmo

[codenyte]

Just experimented a little bit with the codebase and I think removing the "scrolling through pages" animation would be easier than fixing it. I would submit a PR but my code isn't completely free of issues either and it's pretty poorly written because I have almost no prior experience with Flutter.