How to shorten animation duration for ionic modal

I am using the ionic modal within my app, and would like to change the animation speed of when the modal opens. How do I achieve that? I do not want to change the animation itself (the default bottom to top motion, rather, just the speed at which it opens).

as far as I can see, you still will need to create a custom animation and provide this to the modal controller. I have made my own “modal controller” to handle this (for a side animation). See below.

import { Injectable } from '@angular/core';
import { ModalController, AnimationController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class SideModalService {

  constructor(
    public animationCtrl: AnimationController,
    private modalController: ModalController
  ) { }

  dismiss() {
    this.modalController.dismiss();
  }

  create(options: any) {
    const enterAnimation = (baseEl: any) => {

      const backdropAnimation = this.animationCtrl.create()
        // tslint:disable-next-line: no-non-null-assertion
        .addElement(baseEl.querySelector('ion-backdrop')!)
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');

      const wrapperAnimation = this.animationCtrl.create()
        // tslint:disable-next-line: no-non-null-assertion
        .addElement(baseEl.querySelector('.modal-wrapper')!)
        //    .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
        .keyframes([
          { offset: 0, opacity: '0', transform: 'scale(1) translateX(100%)' },
          { offset: 0.1, opacity: '0.4', transform: 'scale(1) ' },
          { offset: 0.8, opacity: '0.8', transform: 'scale(1) translateX(0px)' },
          { offset: 1, opacity: '1', transform: 'scale(1) translateX(0px)' }
        ]);

      return this.animationCtrl.create()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(150)
        .addAnimation([backdropAnimation, wrapperAnimation]);
    };

    const leaveAnimation = (baseEl: any) => {
      return enterAnimation(baseEl).direction('reverse');
    };

    return this.modalController.create({
      ...options,
      leaveAnimation, enterAnimation,
    });
  }

}

To make it slide from the bottom I guess you need to replace translateX to translateY.

(animation code taken from the web, I believe Josh Morony)

Hi Tommertom,

I tried that, but changed the keyframes array to :

{ offset: 0, opacity: ‘0’, transform: ‘translateY(100%)’ },
{ offset: 1, opacity: ‘0.99’, transform: ‘translateY(0px)’ }

…as asuggested.
This sort of gives me what I want, although it doesnt seem as smooth as the default animation.

Maybe check the sourceoode of the modal controller on github
likely it gives you the full animation definition

(I just tried - can’t find the definition that quickly)

All animations for you to grab

1 Like

Thanks a million Tommertom!

1 Like