Modal Hide/Close Animation

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.