ionic-team / ionic-team/ionic-framework
feat: add progress/delta event to ion-router-outlet swipe-to-go-back gesture
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
### Prerequisites
- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.
### Describe the Feature Request
Currently, in Ionic 8, there is no native way to synchronize UI elements (like a global bottom **ion-tab-bar** or custom floating buttons) with the interactive "**swipe-to-go-back**" gesture. On iOS, when a user swipes back from a page that has no bottom bar to a previous page that does (or vice versa), the transition is abrupt. There is no hook to listen to the deltaX or progress (0 to 1) of the swipe to animate these elements proportionally.
Describe the solution you'd like
I would like **IonRouterOutlet** (or a global config) to provide an **Observable** or Event Listener that emits real-time data during a navigation gesture.
Ideally, it would emit an object such as:
```
interface SwipeBackProgress {
state: 'start' | 'moving' | 'end' | 'cancelled';
progress: number; // 0 to 1
deltaX: number;
}
```
### Describe the Use Case
Many modern apps (like Instagram or Spotify) hide or transform global UI elements (like the music player bar or tabs) in sync with the swipe-back gesture. In Ionic, because the ion-tab-bar often lives outside the ion-router-outlet, it remains static while the page content slides, breaking the native "stack" illusion.
### Describe Preferred Solution
Providing a swipeProgress emitter would allow developers to do things like:
```
this.routerOutlet.swipeProgress$.subscribe(ev => {
this.bottomBar.style.transform = `translateY(${ev.progress * 100}%)`;
});
```
### Describe Alternatives
**Manual GestureController**: Creating a custom GestureController on every page to track the edge swipe. This is redundant as it conflicts with Ionic’s internal gesture and is difficult to maintain.
**MutationObserver**: Watching for .ion-page-hidden class changes. This only tells us when a swipe starts, not the size or progress of the swipe.
**Global CSS**: Using CSS transitions, which do not track the user's finger, resulting in a non-native "rubber-banding" feel.
### Related Code
_No response_
### Additional Information
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.