feat: sheet/card modal emit drag

[EinfachHans]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

If a FR like this already exist, please close, but i didn't found one.

It would be great to be able to "dig" into Animations and Gestures that are used in the Ionic Framework.

Describe the Use Case

It would allow us to show, hide or transform & animate stuff in the app while the user performs something. For example with the new sheet style modal we could fade content in or out if the modal is dragged up or dragged down.

Also this can be used for navigation animations.

Describe Preferred Solution

I guess this is kinda tricky, as this can be either defined globally or per component.

For example if i want to implement this for a Modal it must be possible for me to add this in the Component that the Modal uses like

this.modal.animation.subscribe()

Describe Alternatives

Currently i think something like this is possible if we copy/paste all the animations/gestures from ionic into our app and modify to call a handler, but this is not very good, as it doesn't update the animations if you update it internally 🤔

Related Code

No response

Additional Information

No response

[liamdebeasi]

Can you please clarify what it means to "dig into an animation" in Ionic? It sounds like you are looking to get drag events emitted from the modal with the sheet gesture?

[EinfachHans]

Yes exactly. But not only the Drag Gesture and not only the Sheet Modal. If for example (when possible in the future) the sheet modal is changed via a function it should also executy my listener to perform my animations.

Or if we talk about Page Transistions this should work on the first navigate, as well on the navigate back or swipe to go back.

[liamdebeasi]

Some of these animations/transitions are not meant to be extended/customized, so I would prefer not to add this feature to every animation unless we have use cases for each one.

The sheet modal use case makes sense (we have also had people ask about this internally), so I think we can add that one.

[EinfachHans]

Yeah maybe every animation was too much 😃 But i wouldn't limit this on sheet modals, we could start with modals in generall?

[liamdebeasi]

How would regular modals benefit from the drag event?

[EinfachHans]

I think of the Card style modal which is also swipable, so here it wouldn't be showing or hiding more or less content, it would be more having the posibility to do cool animations when draging the modal away

[liamdebeasi]

Thanks -- makes sense to have this work for card modal too.

[JulesLagadic]

Hello,
Any news about this issue? Would be amazing to get a way to subscribe to the drag event... Any workaround possible?

[sean-perkins]

Added additional thoughts here: #25127 (comment)

Summary: We should add a dragEvents property to ion-modal, to allow developers to subscribe to the drag events for both card and sheet modals. Sheet modals should likely include information related to the breakpoint as well.

[sean-perkins]

Found an example of where this feature could be leveraged in Instagram's app:

RPReplay_Final1654890612.mp4

They center the active location in the middle of the content behind the sheet modal, when the sheet modal begins to drag.

[JulienLecoq]

I also needs that to be able to hide dynamically some content when a modal is dragged 👍🏻

[sean-perkins]

Airbnb has UI that would require this feature, where the tab bar is moved off screen as the sheet modal is dragged.

RPReplay_Final1688609862-final.mp4

[aeharding]

Another use case: I would like to have a dragStart and dragEnd events on card modal to open and close the keyboard.

[ijsje71]

I also need these drag events on the modals for another use case. Is this feature in the pipeline right now?

@thetaPC @ShaneK @brandyscarney

[thetaPC]

@ijsje71 Appreciate your interest! We're always working on a variety of improvements and new features. No updates to share just yet, but keep an eye on this thread for any future news.