Search results

Sidebar with Custom Animation in React Sidebar component

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.

Source
Preview
App.tsx
index.tsx
index.html
style.css
App.jsx
index.jsx
import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

export default class App extends React.Component<{}, {}> {
    public sidebarObj: SidebarComponent;
    public btnObj: ButtonComponent;
    private showBackdrop: boolean = true;
    constructor(props: any) {
        super(props);
        this.onCreate = this.onCreate.bind(this);
        this.zoom = this.zoom.bind(this);
        this.open_door = this.open_door.bind(this);
        this.bottom_top = this.bottom_top.bind(this);
        this.rotate = this.rotate.bind(this);
        this.rotate_3d = this.rotate_3d.bind(this);
        this.reverse = this.reverse.bind(this);
        this.close = this.close.bind(this);
    }
    public onCreate():void {
        this.sidebarObj.element.style.visibility='';
    }
    // Zoom Sidebar
    public zoom():void {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("w3-animate-zoom");
    }
    // Open Door
    public open_door():void {
        this.sidebarObj.show();
        const sidebar: Element =document.getElementsByClassName("e-sidebar-overlay")[0];
        sidebar.classList.add("move");
    }
    // Bottom to Top
    public bottom_top(): void {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("w3-animate-bottom");
    }
    // Rotate
    public rotate(): void {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("rotate");
    }
    // Rotate 3D Effect
    public rotate_3d(): void {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("rotate_3d");
    }
    // Reverse Slide Out
    public reverse(): void {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("reverse_slide_out");
    }
    // Close Sidebar Element
    public close(): void {
        this.sidebarObj.element.classList.remove("sidebar");
        this.sidebarObj.element.classList.remove("rotate");
        this.sidebarObj.element.classList.remove("w3-animate-zoom");
        this.sidebarObj.element.classList.remove("w3-animate-bottom");
        this.sidebarObj.element.classList.remove("rotate_3d");
        this.sidebarObj.element.classList.remove("reverse_slide_out");
        this.sidebarObj.hide();
    }
    render() {
        return (
            // Declaration of Sidebar Element
           <div className="control-section">
                <SidebarComponent id="sidebar-element" className="sidebar" ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} showBackdrop={this.showBackdrop} style={{visibility:"hidden"}} created={this.onCreate} width="280px">
                    <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            * Sidebar is rendered with animation effect
                        </div>
                        <div className="center-align">
                            {/* Close Button Declaration*/}
                            <ButtonComponent onClick={this.close} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                </SidebarComponent>
                {/*End of Sidebar Element Declaration*/}
                {/* Main Content Declaration*/}
                <div className="content">
                    <div className="title">Sidebar Transitions</div>
                    <div className="sub-title"> * Click the below button to render the Sidebar with animation effect.</div>
                    <div className="center-align">
                        {/*Button Declaaration */}
                        <ButtonComponent onClick={this.zoom} id="zoom" className="e-btn e-info">Zoom Sidebar</ButtonComponent>
                        <ButtonComponent onClick={this.open_door} id="open_door" className="e-btn e-info">Open Door</ButtonComponent>
                        <ButtonComponent onClick={this.bottom_top} id="bottom_top" className="e-btn e-info">Bottom to Top </ButtonComponent>
                    </div>
                    <div className="center-align">
                        <ButtonComponent onClick={this.rotate} id="rotate" className="e-btn e-info">Rotate</ButtonComponent>
                        <ButtonComponent onClick={this.rotate_3d} id="rotate_3d" className="e-btn e-info">Rotate 3D</ButtonComponent>
                        <ButtonComponent onClick={this.reverse} id="reverse" className="e-btn e-info">Reverse Slide Out </ButtonComponent>
                    </div>
                </div>
            </div>
        )
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
/*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;
    padding-top: 20px;
}
/*Animation styles*/
.move {
    transform:rotateX(-20deg);
}
#close,#close:hover,#close:active,#close: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*/
button {
    margin:5px;
}
import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.showBackdrop = true;
        this.onCreate = this.onCreate.bind(this);
        this.zoom = this.zoom.bind(this);
        this.open_door = this.open_door.bind(this);
        this.bottom_top = this.bottom_top.bind(this);
        this.rotate = this.rotate.bind(this);
        this.rotate_3d = this.rotate_3d.bind(this);
        this.reverse = this.reverse.bind(this);
        this.close = this.close.bind(this);
    }
    onCreate() {
        this.sidebarObj.element.style.visibility = '';
    }
    // Zoom Sidebar
    zoom() {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("w3-animate-zoom");
    }
    // Open Door
    open_door() {
        this.sidebarObj.show();
        const sidebar = document.getElementsByClassName("e-sidebar-overlay")[0];
        sidebar.classList.add("move");
    }
    // Bottom to Top
    bottom_top() {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("w3-animate-bottom");
    }
    // Rotate
    rotate() {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("rotate");
    }
    // Rotate 3D Effect
    rotate_3d() {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("rotate_3d");
    }
    // Reverse Slide Out
    reverse() {
        this.sidebarObj.show();
        this.sidebarObj.element.classList.add("reverse_slide_out");
    }
    // Close Sidebar Element
    close() {
        this.sidebarObj.element.classList.remove("sidebar");
        this.sidebarObj.element.classList.remove("rotate");
        this.sidebarObj.element.classList.remove("w3-animate-zoom");
        this.sidebarObj.element.classList.remove("w3-animate-bottom");
        this.sidebarObj.element.classList.remove("rotate_3d");
        this.sidebarObj.element.classList.remove("reverse_slide_out");
        this.sidebarObj.hide();
    }
    render() {
        return (
        // Declaration of Sidebar Element
        <div className="control-section">
                <SidebarComponent id="sidebar-element" className="sidebar" ref={Sidebar => this.sidebarObj = Sidebar} showBackdrop={this.showBackdrop} style={{ visibility: "hidden" }} created={this.onCreate} width="280px">
                    <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            * Sidebar is rendered with animation effect
                        </div>
                        <div className="center-align">
                            
                            <ButtonComponent onClick={this.close} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                </SidebarComponent>
                
                
                <div className="content">
                    <div className="title">Sidebar Transitions</div>
                    <div className="sub-title"> * Click the below button to render the Sidebar with animation effect.</div>
                    <div className="center-align">
                        
                        <ButtonComponent onClick={this.zoom} id="zoom" className="e-btn e-info">Zoom Sidebar</ButtonComponent>
                        <ButtonComponent onClick={this.open_door} id="open_door" className="e-btn e-info">Open Door</ButtonComponent>
                        <ButtonComponent onClick={this.bottom_top} id="bottom_top" className="e-btn e-info">Bottom to Top </ButtonComponent>
                    </div>
                    <div className="center-align">
                        <ButtonComponent onClick={this.rotate} id="rotate" className="e-btn e-info">Rotate</ButtonComponent>
                        <ButtonComponent onClick={this.rotate_3d} id="rotate_3d" className="e-btn e-info">Rotate 3D</ButtonComponent>
                        <ButtonComponent onClick={this.reverse} id="reverse" className="e-btn e-info">Reverse Slide Out </ButtonComponent>
                    </div>
                </div>
            </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));