Variation Animation in EJ2 TypeScript Sidebar control

28 Jan 202517 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 observe how the custom animations work with the Sidebar.

The Sidebar will automatically adjust its expanding animation to match any custom size specified in CSS styles.

import { Sidebar } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

let sidebarElement: Sidebar = new Sidebar({
    showBackdrop: true, width: '280px', created: oncreate
});
sidebarElement.appendTo('#sidebar-element');

// Zoom Effect
let zoomBtn = document.querySelector('#zoom');
if (zoomBtn) {
    zoomBtn.addEventListener('click', () => {
        sidebarElement.show();
        sidebarElement.element.classList.add("w3-animate-zoom");
    });
}
// Open Door Effect
let openDoorBtn = document.querySelector('#open_door');
if (openDoorBtn) {
    openDoorBtn.addEventListener('click', () => {
        sidebarElement.show();
        let sidebar: Element = document.getElementsByClassName("e-sidebar-overlay")[0];
        sidebar.classList.add("move");
    });
}
// Bottom to Top
let bottomTopBtn = document.querySelector('#bottom_top');
if (bottomTopBtn) {
    bottomTopBtn.addEventListener('click', () => {
        sidebarElement.show();
        sidebarElement.element.classList.add("w3-animate-bottom");
    });
}
// Rotate Sidebar
let rotateBtn = document.querySelector('#rotate');
if (rotateBtn) {
    rotateBtn.addEventListener('click', () => {
        sidebarElement.show();
        sidebarElement.element.classList.add("rotate");
    });
}
// Sidebar with 3D Animation
let rotate3dBtn = document.querySelector('#rotate_3d');
if (rotate3dBtn) {
    rotate3dBtn.addEventListener('click', () => {
        sidebarElement.show();
        sidebarElement.element.classList.add("rotate_3d");
    });
}
// Reverse Slide Out
let reverseBtn = document.querySelector('#reverse');
if (reverseBtn) {
    reverseBtn.addEventListener('click', () => {
        sidebarElement.show();
        sidebarElement.element.classList.add("reverse_slide_out");
    });
}
// Close the Sidebar
let closeBtn = document.querySelector('#close_btn');
if (closeBtn) {
    closeBtn.addEventListener('click', () => {
        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();
    });
}
//Remove the Flickering Effect
function oncreate(): void {
    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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
    <style>
        /*Sidebar element styles*/
        #sidebar-element {
            background-color: rgb(25, 118, 210);
            color: #ffffff;
        }

        .sidebar {
            animation-name: rotate_sidebar;
            animation-duration: 2s
        }

        @keyframes rotate_sidebar {
            from {
                transform: rotateY(150deg)
            }

            to {
                transform: rotateY(360deg)
            }
        }

        /*main content styles*/
        .title {
            text-align: center;
            font-size: 25px;
            padding: 15px;
            font-style: italic;
        }

        .sub-title {
            text-align: center;
            font-size: 16px;
            padding: 10px;
            font-style: italic;
        }

        .center-align {
            text-align: center;
        }

        /*Animation styles*/
        .move {
            transform: rotateX(-20deg);
        }

        #close,
        #close:hover,
        #close:active,
        #close:focus {
            /* csslint allow: adjoining-classes*/
            background: #fafafa;
            color: black;
        }

        #close_btn,
        #close_btn:hover,
        #close_btn:active,
        #close_btn:focus {
            /* csslint allow: adjoining-classes*/
            background: #fafafa;
            color: black;
        }

        .w3-animate-bottom {
            animation-name: animatebottom;
            animation-duration: 1s;
        }

        @keyframes animatebottom {
            from {
                margin-top: 100%;
            }

            to {
                margin-top: 0%;
            }
        }

        .w3-animate-zoom {
            animation-name: animatezoom;
            animation-duration: 1s
        }

        @keyframes animatezoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }

        .rotate {
            animation-name: rotate1;
            animation-duration: 1s
        }

        @keyframes rotate1 {
            from {
                transform: rotateX(150deg)
            }

            to {
                transform: rotateX(360deg)
            }
        }

        .rotate_3d {
            animation-name: rotate;
            animation-duration: 1s
        }

        @keyframes rotate {
            from {
                transform: rotateY(150deg)
            }

            to {
                transform: rotateY(360deg)
            }
        }

        .reverse_slide_out {

            animation-name: reverse1;
            animation-duration: 1s
        }

        @keyframes reverse1 {
            from {
                transform: rotateY(-65deg);
                margin-left: 200px;
            }

            to {
                margin-left: 0%;
            }
        }

        /*End of animation styles*/
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}