ionic-team / ionic-team/ionic-framework

feat: add progress/delta event to ion-router-outlet swipe-to-go-back gesture

Open
#30,897 0 comments 0 reactions 0 assignees View on GitHub
triage
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.