How can I customise card modal animation?

ionic-v1
1

I’m using the ionic JS cdn to create a card modal, using the example code from the docs.
When the card modal is opened on iOS, there’s a neat animation that scales down and changes the border radius of the presentingElement behind it, in this case it’s the div with the ion-page class.

I was wondering if there any way to customise the border radius in the animation that turns the borders from square to rounded edges when a modal opens in front of it?

Code is below, would appreciate any help :smile:

<div class="ion-page">
  <ion-header>
    <ion-toolbar>
      <ion-title>App</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>

    <ion-modal trigger="open-modal">
      <ion-header>
        <ion-toolbar>
          <ion-title>Modal</ion-title>
          <ion-buttons slot="end">
            <ion-button onclick="modal.dismiss()">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>

        <!-- Modal content -->

      </ion-content>
    </ion-modal>
  </ion-content>
</div>

<script>
  var modal = document.querySelector('ion-modal');

  modal.presentingElement = document.querySelector('.ion-page');

  function dismiss() {
    modal.dismiss();
  }
</script>
2