# Adding custom transitions/custom modal transition

**URL:** <https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924>\
**Category:** ionic-v3\
**Created:** [January 11, 2017, 10:12pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924 "2017-01-11T22:12:17Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ccdex\_chris](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ccdex_chris/32/106007_2.png) [@ccdex\_chris](https://forum.ionicframework.com/u/ccdex_chris)\
**Post date:** [January 11, 2017, 10:12pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/1 "2017-01-11T22:12:18Z")

</div>

Hey everyone,

I am looking for a way to add a custom modal transition. I’d like to have certain modals (not all modals) to be the full width of the viewport and slide up from the bottom, taking only 50% of the vertical viewport.

I believe to achieve this, I need to create a new transition and register it by injecting the Config and then doing `config.setTransition('custom-transition', CustomTransition)` however `setTransition` is private. Why is this?

How do I go about animating a modal to slide up? I’ve tried using .pageRef() and adding a custom class to the modal-wrapper to set the modal to full width, etc… I did get partially what I wanted, but the transitions weren’t desirable. It was animating from the center to the bottom half the screen.

Anyone have any ideas?

Thanks!

---

<div class="post-metadata">

**Author:** ![badpenguin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/badpenguin/32/98075_2.png) [@badpenguin](https://forum.ionicframework.com/u/badpenguin)\
**Post date:** [January 25, 2017, 4:58pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/2 "2017-01-25T16:58:00Z")

</div>

Yes, i wish too. I need slide up and down!

---

<div class="post-metadata">

**Author:** ![onderceylan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/onderceylan/32/114383_2.png) [@onderceylan](https://forum.ionicframework.com/u/onderceylan)\
**Post date:** [April 18, 2017, 10:51pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/3 "2017-04-18T22:51:30Z")

</div>

@ccdex_chris @badpenguin I just created 2 custom transitions for my modals and it works like a charm.

First, you need to create your transition classes.

**scale-up-enter.transition.ts**

```
import { Animation, PageTransition } from 'ionic-angular';

export class ModalScaleUpEnterTransition extends PageTransition {

public init() {
    const ele = this.enteringView.pageRef().nativeElement;
    const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));

    wrapper.beforeStyles({ 'transform': 'scale(0)', 'opacity': 1 });
    wrapper.fromTo('transform', 'scale(0)', 'scale(1.0)');
    wrapper.fromTo('opacity', 1, 1);

    this
        .element(this.enteringView.pageRef())
        .duration(500)
        .easing('cubic-bezier(.1, .7, .1, 1)')
        .add(wrapper);
}
}

```

**scale-up-leave.transition.ts** - I want to point leavingView/enteringView difference out here.

```
import { Animation, PageTransition } from 'ionic-angular';

export class ModalScaleUpLeaveTransition extends PageTransition {

public init() {
    const ele = this.leavingView.pageRef().nativeElement;
    const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
    const contentWrapper = new Animation(this.plt, ele.querySelector('.wrapper'));

    wrapper.beforeStyles({ 'transform': 'scale(0)', 'opacity': 1 });
    wrapper.fromTo('transform', 'scale(1)', 'scale(5.0)');
    wrapper.fromTo('opacity', 1, 1);
    contentWrapper.fromTo('opacity', 1, 0);

    this
        .element(this.leavingView.pageRef())
        .duration(500)
        .easing('cubic-bezier(.1, .7, .1, 1)')
        .add(contentWrapper)
        .add(wrapper);
}
}

```

Then introduce your transition classes to ionic, by using Config. I did it on AppModule but you can basically do it anywhere.

**app.module.ts**

```
import { Config } from 'ionic-angular';

export class AppModule {
    constructor(public config: Config) {
        this.setCustomTransitions();
    }

    private setCustomTransitions() {
        this.config.setTransition('modal-scale-up-leave', ModalScaleUpLeaveTransition);
        this.config.setTransition('modal-scale-up-enter', ModalScaleUpEnterTransition);
    }
}

```

FInally set the transition name that you introduced to your modal definition.

**your-page.component.ts**

```
public presentYourModal() {
    const yourModal = this.modalController.create(YourModalComponent, { userId: 46 }, {
        showBackdrop: false,
        enableBackdropDismiss: false,
        enterAnimation: 'modal-scale-up-enter',
        leaveAnimation: 'modal-scale-up-leave'
    });
    yourModal.present();
}

```

That’s it!

It’s a pity that I had to go through ionic’s implementation of basic 2 transitions to understand how this works. Even enterAnimation and leaveAnimation options are not visible for modalOptions doc on ionic site. A final note for the internet: by the time I’m writing this, it’s ionic 3 and angular 4.

---

<div class="post-metadata">

**Author:** ![ccdex\_chris](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ccdex_chris/32/106007_2.png) [@ccdex\_chris](https://forum.ionicframework.com/u/ccdex_chris)\
**Post date:** [April 19, 2017, 5:59pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/4 "2017-04-19T17:59:06Z")

</div>

Definitely going to try this. Thanks so much for sharing @onderceylan!

---

<div class="post-metadata">

**Author:** ![Tugsbileg](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Tugsbileg](https://forum.ionicframework.com/u/Tugsbileg)\
**Post date:** [April 25, 2017, 9:42am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/5 "2017-04-25T09:42:59Z")

</div>

Is it works? Anybody check it? It’s not working for me? My ionic version is 3.0.1

---

<div class="post-metadata">

**Author:** ![onderceylan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/onderceylan/32/114383_2.png) [@onderceylan](https://forum.ionicframework.com/u/onderceylan)\
**Post date:** [April 26, 2017, 8:14am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/6 "2017-04-26T08:14:13Z")

</div>

What’s not working exactly?

---

<div class="post-metadata">

**Author:** ![Tugsbileg](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Tugsbileg](https://forum.ionicframework.com/u/Tugsbileg)\
**Post date:** [April 26, 2017, 10:54am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/7 "2017-04-26T10:54:52Z")

</div>

**app.module.ts**

```auto
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { Config, IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ModalScaleUpEnterTransition } from '../classes/scale-up-enter.transition';
import { ModalScaleUpLeaveTransition } from '../classes/scale-up-leave.transition';

import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {
  constructor(public config: Config) {
    this.setCustomTransitions();
  }

  private setCustomTransitions() {
    this.config.setTransition('modal-scale-up-leave', ModalScaleUpLeaveTransition);
    this.config.setTransition('modal-scale-up-enter', ModalScaleUpEnterTransition);
  }
}

```

**example page**

```auto
import { Component, ViewChild, trigger, state, style, transition, animate, keyframes } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ModalController, Slides } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-intro',
  templateUrl: 'intro.html',
})
export class Intro {
  @ViewChild(Slides) slides: Slides;
  sliderOptions: any = {
    effect: 'cube',
    noSwiping: true,
    direction: 'vertical'
  };
  constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController, public modalCtrl: ModalController) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Intro');
  }

  openLoginModal() {
    let loginModal = this.modalCtrl.create('LoginModal', {
      enterAnimation: 'modal-scale-up-enter',
      leaveAnimation: 'modal-scale-up-leave'
    });
    loginModal.onDidDismiss(data => {
      console.log(data);
    });
    loginModal.present();
  }
}

```

It should work? I added custom console.log message in ModalScaleUpEnterTransition but it doesn’t show up when entering a modal.

---

<div class="post-metadata">

**Author:** ![onderceylan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/onderceylan/32/114383_2.png) [@onderceylan](https://forum.ionicframework.com/u/onderceylan)\
**Post date:** [May 1, 2017, 8:49am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/8 "2017-05-01T08:49:44Z")

</div>

Yeah it should work, you may have a styling issue. I can’t really say much without further inspection. Maybe a plunker?

---

<div class="post-metadata">

**Author:** ![Dranix](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@Dranix](https://forum.ionicframework.com/u/Dranix)\
**Post date:** [May 3, 2017, 10:06am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/9 "2017-05-03T10:06:04Z")

</div>

The solution provided by @onderceylan works very well. I tested with Ionic 3 in the iOS simulator.

Small question: how to dismiss the view, when I use  
`this.viewCtrl.dismiss();`  
it doesn’t have any animation at all

---

<div class="post-metadata">

**Author:** ![onderceylan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/onderceylan/32/114383_2.png) [@onderceylan](https://forum.ionicframework.com/u/onderceylan)\
**Post date:** [May 3, 2017, 2:27pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/10 "2017-05-03T14:27:17Z")

</div>

@dranix I’m doing the same and it works fine for me. It sounds like your leaveAnimation doesn’t work as expected. Did you pay attention on leavingView? Debugging on your leave transition class would help.

---

<div class="post-metadata">

**Author:** ![Dranix](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@Dranix](https://forum.ionicframework.com/u/Dranix)\
**Post date:** [May 4, 2017, 5:56am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/11 "2017-05-04T05:56:07Z")

</div>

@onderceylan you’re right. It works perfectly. Thank a bunch 😃

---

<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, 7:40am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/13 "2017-05-22T07:40:23Z")

</div>

> [@Tugsbileg](#):
>
> let loginModal = this.modalCtrl.create(‘LoginModal’, {  
> enterAnimation: ‘modal-scale-up-enter’,  
> leaveAnimation: ‘modal-scale-up-leave’  
> });

Should be set ‘enterAnimation’ in 3rd parameter:

> let loginModal = this.modalCtrl.create(‘LoginModal’, {}, {  
> enterAnimation: ‘modal-scale-up-enter’,  
> leaveAnimation: ‘modal-scale-up-leave’  
> });

---

<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 23, 2017, 1:52am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/14 "2017-05-23T01:52:20Z")

</div>

1. “super.init();” should run in first line of each transition’s init, or the modal content may in wrong position.

```auto
public init() {
   super.init(); //<--- add this

```

* * *

1. Custom transition don’t support the default option “showBackdrop: false”. Backdrop will always show.

Checked “Backdrop” show/hide logic is on the template, not one the code:

> <https://github.com/ionic-team/ionic/blob/master/src/components/modal/modal-transitions.ts>

Any idea how to fix?

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [August 28, 2017, 7:12am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/15 "2017-08-28T07:12:28Z")

</div>

Hi, can you help me out… how to change your code so that the animation slides from right to left like a sliding menu ?

---

<div class="post-metadata">

**Author:** ![onderceylan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/onderceylan/32/114383_2.png) [@onderceylan](https://forum.ionicframework.com/u/onderceylan)\
**Post date:** [September 15, 2017, 12:45pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/16 "2017-09-15T12:45:53Z")

</div>

Hey, you can inspect ionic’s source code. There’s those animations as far as I know.

---

<div class="post-metadata">

**Author:** ![inoxious](https://avatars.discourse-cdn.com/v4/letter/i/848f3c/32.png) [@inoxious](https://forum.ionicframework.com/u/inoxious)\
**Post date:** [September 15, 2017, 1:22pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/17 "2017-09-15T13:22:58Z")

</div>

Hello guys, on the same topic here.  
I am using this.view.dismiss() on a page which is not a modal, and it closes with slide-to-right transition for me.  
I how can i make the default slide-to-bottom, on this.view.dimiss(). I see that you mentioned above on leaveAnimation, but i am not sure how to make it out.

---

<div class="post-metadata">

**Author:** ![thestevenmellor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thestevenmellor/32/110840_2.png) [@thestevenmellor](https://forum.ionicframework.com/u/thestevenmellor)\
**Post date:** [November 24, 2017, 2:00am UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/18 "2017-11-24T02:00:17Z")

</div>

I was having a weird issue with the screen popping on dismiss. I changed a line on the scale-up.leave.transition.ts to fix this.

`wrapper.fromTo('transform', 'scale(1)', 'scale(5.0)');`

to

`wrapper.fromTo('transform', 'scale(1)', 'scale(0)');`

It started performing as expected.

Hope this helps someone!

---

<div class="post-metadata">

**Author:** ![luckylooke](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luckylooke/32/107312_2.png) [@luckylooke](https://forum.ionicframework.com/u/luckylooke)\
**Post date:** [November 27, 2017, 12:35pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/19 "2017-11-27T12:35:59Z")

</div>

Thank you, I was able to change popover transition using your instructions. Except popover does not have options to change transitions per instance, so you need to set it globally for whole app in config.

Maybe this can help for those who wants to set transition for all modals, or popovers… etc  
Here is how you can set transitions:

> **[Ionic Framework](https://ionicframework.com/docs/api/config/Config/#config)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

I have just used

```auto
	popoverEnter: 'custom-popover-pop-in',
      	popoverLeave: 'custom-popover-pop-out',

```

where

```auto
  this.config.setTransition('custom-popover-pop-in', CustomPopoverPopIn )
  this.config.setTransition('custom-popover-pop-out', CustomPopoverPopOut )

```

same as @onderceylan described for modal transitions

Happy coding 😉

---

<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 31, 2018, 9:06pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/20 "2018-01-31T21:06:20Z")

</div>

and the backdrop? i’m using modal with custom width… so, the backdrop don’t follows the same effect… how can i add him?

---

<div class="post-metadata">

**Author:** ![franzisk4sis](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/franzisk4sis/32/111787_2.png) [@franzisk4sis](https://forum.ionicframework.com/u/franzisk4sis)\
**Post date:** [March 22, 2018, 5:54pm UTC](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/21 "2018-03-22T17:54:26Z")

</div>

Thanks a lot, you helped me for sure!! 🤗

[Next page](https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924.md?page=2)