# Modal Hide/Close Animation

**URL:** <https://forum.ionicframework.com/t/modal-hide-close-animation/34766>\
**Category:** ionic-v1\
**Created:** [October 15, 2015, 10:00pm UTC](https://forum.ionicframework.com/t/modal-hide-close-animation/34766 "2015-10-15T22:00:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![xereda](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xereda/32/92099_2.png) [@xereda](https://forum.ionicframework.com/u/xereda)\
**Post date:** [October 15, 2015, 10:00pm UTC](https://forum.ionicframework.com/t/modal-hide-close-animation/34766/1 "2015-10-15T22:00:49Z")

</div>

I researched, but found insufficient information.

The question: The Ionic supports apply different animation in closing a modal? The action of closing, by default, apparently has a similar animation with slide-out down '.

They have more details about it !?

Thank you for any help.

Jackson

---

<div class="post-metadata">

**Author:** ![jwt02180](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@jwt02180](https://forum.ionicframework.com/u/jwt02180)\
**Post date:** [October 16, 2015, 1:58pm UTC](https://forum.ionicframework.com/t/modal-hide-close-animation/34766/2 "2015-10-16T13:58:02Z")

</div>

This is an example from how I made a custom animation, and I think it came from the forum from a while back. It utilizes ngAnimate to add the appropriate css classes that do the actual animation. So create your modal:

```
$ionicModal.fromTemplateUrl('template-file.html', {
    id: 'modal-id',
    scope: $scope,
    animation: 'zoom-from-center' //css class to apply animation
}).then(function (modal) {
    $scope.myModal = modal; //this applies the modal reference to the $scope
});

```

Then write your css animation:

```
/*modal animation*/
.zoom-from-center {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
}

.zoom-from-center.ng-enter, .zoom-from-center > .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;
}

.zoom-from-center.ng-enter-active, .zoom-from-center > .ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

.zoom-from-center.ng-leave, .zoom-from-center > .ng-leave {
    -webkit-transition: all ease-in-out 250ms;
    transition: all ease-in-out 250ms;
}
/*end modal animation*/

```

This will make the modal zoom in from the center of the screen. If you want different effects you need to search for css animation examples.