# Custom Modal Transition?

**URL:** <https://forum.ionicframework.com/t/custom-modal-transition/76424>\
**Category:** ionic-v3\
**Created:** [January 17, 2017, 2:48am UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424 "2017-01-17T02:48:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ionize](https://avatars.discourse-cdn.com/v4/letter/i/71c47a/32.png) [@Ionize](https://forum.ionicframework.com/u/Ionize)\
**Post date:** [January 17, 2017, 2:48am UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424/1 "2017-01-17T02:48:18Z")

</div>

I noticed in the Config that you can set your Modal Transition via modalEnter and modalLeave with ‘modal-slide-in’, ‘modal-slide-out’. [https://ionicframework.com/docs/v2/api/config/Config/](https://ionicframework.com/docs/v2/api/config/Config/)

However I want a fade-in, fade-out transition. How do I go about creating them and setting them on the Config or ModalController?

Thanks.

---

<div class="post-metadata">

**Author:** ![\_sebastianbaar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/_sebastianbaar/32/105998_2.png) [@\_sebastianbaar](https://forum.ionicframework.com/u/_sebastianbaar)\
**Post date:** [February 8, 2017, 4:20pm UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424/2 "2017-02-08T16:20:42Z")

</div>

+1  
Is there any documentation about the available transitions? In the docs it only says: “The name of the transition to use …”. Where can I look up these names?

---

<div class="post-metadata">

**Author:** ![jbecker](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jbecker/32/107588_2.png) [@jbecker](https://forum.ionicframework.com/u/jbecker)\
**Post date:** [March 14, 2017, 2:18pm UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424/3 "2017-03-14T14:18:25Z")

</div>

You can get them from here: [https://github.com/driftyco/ionic/blob/master/src/transitions/transition-registry.ts](https://github.com/driftyco/ionic/blob/master/src/transitions/transition-registry.ts)

But of course that’s not very user friendly 😃

Also important to note, that you can’t use ‘ios-transition’ (which is a `PageTransition`) with a `Modal`. 😒

---

<div class="post-metadata">

**Author:** ![Darksideous](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@Darksideous](https://forum.ionicframework.com/u/Darksideous)\
**Post date:** [March 30, 2017, 6:03pm UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424/4 "2017-03-30T18:03:52Z")

</div>

hey jbecker didnt see anything there regarding setting size and perhaps positions of different modals in the same app. Could you point me in the right direction

---

<div class="post-metadata">

**Author:** ![sonicwong78](https://avatars.discourse-cdn.com/v4/letter/s/ea666f/32.png) [@sonicwong78](https://forum.ionicframework.com/u/sonicwong78)\
**Post date:** [May 22, 2017, 4:57am UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424/5 "2017-05-22T04:57:24Z")

</div>

+1, anybody can help?

---

<div class="post-metadata">

**Author:** ![ramon](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ramon/32/75852_2.png) [@ramon](https://forum.ionicframework.com/u/ramon)\
**Post date:** [July 19, 2017, 12:28pm UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424/6 "2017-07-19T12:28:05Z")

</div>

Yes, I want exact this same feature.

Any progress?

Can you help us @mhartington?

---

<div class="post-metadata">

**Author:** ![danielpt](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danielpt/32/95937_2.png) [@danielpt](https://forum.ionicframework.com/u/danielpt)\
**Post date:** [January 21, 2018, 8:36pm UTC](https://forum.ionicframework.com/t/custom-modal-transition/76424/7 "2018-01-21T20:36:11Z")

</div>

How can i in ionic 3?

showModal() {  
var modal = this.modalCtrl.create(FiltrosPage);  
modal.present();  
}