Slide-in-right animation for ionicModal

1

I couldn’t find slide-in-right animation for ionicModal. So i create one on my own.

Usage:
…
animation: ‘slide-in-right’
…

css:

.slide-in-right {
  -webkit-transform: translateX(100%);
    transform: translateX(100%); }

.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms; }

.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
  -webkit-transform: translateX(0);
    transform: translateX(0); }

.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
  -webkit-transition: all ease-in-out 250ms;
  transition: all ease-in-out 250ms; }
18 Likes
2

pretty cool, will give this a try… i am more of a developer and not too good with animations, how would I change this to slide in from the bottom

3

Use ‘slide-in-up’ instead of ‘slide-in-right’. That is the default animation for ionicModals.

4

Nice, works perfectly!

5

Awesome, Thanks guy!

6

fantastic! thank you very much. works great

7

I love you… thanks!

8

well done! i love it and just copy paste it … works! :slight_smile: thanks

9

nice one!!! Absolutely perfect

10

it’s cool :slight_smile:
thank for a lot :cactus:

11

Great, thanks for sharing this. It saved a good time!

Only a small change to use translate3d(100%, 0, 0) instead of translateX(100%)

It will trigger hardware acceleration in devices with it and will deliver a better performance.

The same code with this change:

.slide-in-right {
  -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }

.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms; }

.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
  -webkit-transition: all ease-in-out 250ms;
  transition: all ease-in-out 250ms; }
1 Like
12

How do you use this in the modalController create method?

13

@mrameezraja do you mind sharing the details of how you applied the animation to ionicModal?. I tried passing to .present({animation:… but did not work. FYI - I’m using version 3

14

Others … I was able to implement based informatio provided by @onderceylan here