Using a custom animation for Editor open and close

Brandon_Voorvelt

Hi team!

I'm using a custom template for editor and will need to change up the Editor open/close animations.
Specifically, I would need the Editor to slide in from the right on open and vise versa on close.

I noticed that the .fade class in the .modal container controls the animations.

How would I be able to customise the default animations?

allan

It looks like you are using Bootstrap styling for Editor there? You might be able to modify the Bootstrap CSS, similar to what this SO thread mentions, but reading the Bootstrap documentation it doesn't look like something that they specifically support.

Allan

Brandon_Voorvelt

Thanks Allan, that SO thread worked for me

In case the SO thread or codepen disappears in the future, to achieve this - adding either .left or .right (whichever you desire) to the .modal along with this css works perfectly:

.modal.left .modal-dialog {
    position:fixed;
    right: 0;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.right .modal-body {
    padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
    right: 0;
}

allan

Nice one - thanks for sharing the completed solution with us.

Allan