Sidebar with variation animation in EJ2 JavaScript Sidebar control

2 May 20237 minutes to read
In the following example, the sidebar is rendered with custom animation effects. Click the buttons available in the main content area to check how the custom animations works with sidebar.
Sidebar will automatically adjust expanding animation to match any custom size specified in CSS styles.
index.js
index.html
ej.base.enableRipple(true);
   
  //initialization of sidebar 
var sidebarElement = new ej.navigations.Sidebar({
        showBackdrop: true,width: '280px', created:oncreate
});
sidebarElement.appendTo('#sidebar-element');
//end of Sidebar initialization
document.getElementById('zoom').onclick = function () {
    sidebarElement.show();
    sidebarElement.element.classList.add("w3-animate-zoom");
}
 // Opendoor Effect
document.getElementById('open_door').onclick = function () {
    sidebarElement.show();
    var sidebar =document.getElementsByClassName("e-sidebar-overlay")[0];
    sidebar.classList.add("move");
}
//Bottom to Top
document.getElementById('bottom_top').onclick = function () {
    sidebarElement.show();
    sidebarElement.element.classList.add("w3-animate-bottom");
}
//Rotate Sidebar 
document.getElementById('rotate').onclick = function () {
    sidebarElement.show();
    sidebarElement.element.classList.add("rotate");
}
//Rotate 3d Animation
document.getElementById('rotate_3d').onclick = function () {
    sidebarElement.show();
    sidebarElement.element.classList.add("rotate_3d");
}
//Reverse Slide Out
document.getElementById('reverse').onclick = function () {
    sidebarElement.show();
    sidebarElement.element.classList.add("reverse_slide_out");
}

// Close the Sidebar
document.getElementById('close_btn').onclick = function () {
    sidebarElement.element.classList.remove("sidebar");
    sidebarElement.element.classList.remove("rotate");
    sidebarElement.element.classList.remove("w3-animate-zoom");
    sidebarElement.element.classList.remove("w3-animate-bottom");
    sidebarElement.element.classList.remove("rotate_3d");
    sidebarElement.element.classList.remove("reverse_slide_out");
    sidebarElement.hide(); 
};

function oncreate() {
     this.element.style.visibility = '';
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div>
        <aside id="sidebar-element" class="sidebar" style="visibility: hidden">
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                * Sidebar is rendered with animation effect
            </div>
            <div class="center-align">
                <button id="close_btn" class="e-btn close-btn">Close Sidebar</button>
            </div>
        </aside>
        <!-- end of sidebar element -->
        <!-- main content declaration -->
        <div id="default">
            <div class="title">Sidebar Transitions</div>
            <div class="sub-title"> * Click the below button to render the Sidebar with animation effect.</div>
            <div style="padding:20px" class="center-align">
                <button id="zoom" class="e-btn e-info">Zoom Sidebar</button>
                <button id="open_door" class="e-btn e-info">Open Door </button>
                <button id="bottom_top" class="e-btn e-info">Bottom to Top</button>
            </div>
            <div style="padding:20px" class="center-align">
                <button id="rotate" class="e-btn e-info"> Rotate</button>
                <button id="rotate_3d" class="e-btn e-info"> Rotate 3D</button>
                <button id="reverse" class="e-btn e-info"> Reverse Slide Out</button>
            </div>
        </div> 
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>