Using a custom animation for Editor open and close

Using a custom animation for Editor open and close

Brandon_VoorveltBrandon_Voorvelt Posts: 7Questions: 3Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,035Questions: 1Answers: 9,953 Site admin
    Answer ✓

    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_VoorveltBrandon_Voorvelt Posts: 7Questions: 3Answers: 0
    edited February 2023

    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;
    }
    
  • allanallan Posts: 61,035Questions: 1Answers: 9,953 Site admin

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

    Allan

Sign In or Register to comment.