# How to shorten animation duration for ionic modal

**URL:** <https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772>\
**Category:** Ionic Framework\
**Created:** [June 7, 2021, 9:55pm UTC](https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772 "2021-06-07T21:55:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![phild](https://avatars.discourse-cdn.com/v4/letter/p/ac8455/32.png) [@phild](https://forum.ionicframework.com/u/phild)\
**Post date:** [June 7, 2021, 9:55pm UTC](https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772/1 "2021-06-07T21:55:37Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [June 8, 2021, 7:28am UTC](https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772/2 "2021-06-08T07:28:56Z")

</div>

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.

```auto
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)

---

<div class="post-metadata">

**Author:** ![phild](https://avatars.discourse-cdn.com/v4/letter/p/ac8455/32.png) [@phild](https://forum.ionicframework.com/u/phild)\
**Post date:** [June 8, 2021, 2:32pm UTC](https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772/3 "2021-06-08T14:32:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [June 8, 2021, 2:47pm UTC](https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772/4 "2021-06-08T14:47:07Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [June 8, 2021, 4:35pm UTC](https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772/5 "2021-06-08T16:35:39Z")

</div>

> **[ionic-team/ionic-framework](https://github.com/ionic-team/ionic-framework/tree/8e0e5da7407adecb7471b3a6b0ac059337761355/core/src/components/modal/animations)**
>
> 8e0e5da7407adecb7471b3a6b0ac059337761355/core/src/components/modal/animations

All animations for you to grab

---

<div class="post-metadata">

**Author:** ![phild](https://avatars.discourse-cdn.com/v4/letter/p/ac8455/32.png) [@phild](https://forum.ionicframework.com/u/phild)\
**Post date:** [June 8, 2021, 4:51pm UTC](https://forum.ionicframework.com/t/how-to-shorten-animation-duration-for-ionic-modal/210772/6 "2021-06-08T16:51:36Z")

</div>

Thanks a million Tommertom!