Sidebar with variation animation in React Sidebar component
30 Jan 202316 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.
import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
function App() {
let sidebarObj;
let btnObj;
let showBackdrop = true;
function onCreate() {
sidebarObj.element.style.visibility = '';
}
// Zoom Sidebar
function zoom() {
sidebarObj.show();
sidebarObj.element.classList.add("w3-animate-zoom");
}
// Open Door
function open_door() {
sidebarObj.show();
const sidebar = document.getElementsByClassName("e-sidebar-overlay")[0];
sidebar.classList.add("move");
}
// Bottom to Top
function bottom_top() {
sidebarObj.show();
sidebarObj.element.classList.add("w3-animate-bottom");
}
// Rotate
function rotate() {
sidebarObj.show();
sidebarObj.element.classList.add("rotate");
}
// Rotate 3D Effect
function rotate_3d() {
sidebarObj.show();
sidebarObj.element.classList.add("rotate_3d");
}
// Reverse Slide Out
function reverse() {
sidebarObj.show();
sidebarObj.element.classList.add("reverse_slide_out");
}
// Close Sidebar Element
function close() {
sidebarObj.element.classList.remove("sidebar");
sidebarObj.element.classList.remove("rotate");
sidebarObj.element.classList.remove("w3-animate-zoom");
sidebarObj.element.classList.remove("w3-animate-bottom");
sidebarObj.element.classList.remove("rotate_3d");
sidebarObj.element.classList.remove("reverse_slide_out");
sidebarObj.hide();
}
return (
// Declaration of Sidebar Element
<div className="control-section">
<SidebarComponent id="sidebar-element" className="sidebar" ref={Sidebar => sidebarObj = Sidebar} showBackdrop={showBackdrop} style={{ visibility: "hidden" }} created={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={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={zoom} id="zoom" className="e-btn e-info">Zoom Sidebar</ButtonComponent>
<ButtonComponent onClick={open_door} id="open_door" className="e-btn e-info">Open Door</ButtonComponent>
<ButtonComponent onClick={bottom_top} id="bottom_top" className="e-btn e-info">Bottom to Top </ButtonComponent>
</div>
<div className="center-align">
<ButtonComponent onClick={rotate} id="rotate" className="e-btn e-info">Rotate</ButtonComponent>
<ButtonComponent onClick={rotate_3d} id="rotate_3d" className="e-btn e-info">Rotate 3D</ButtonComponent>
<ButtonComponent onClick={reverse} id="reverse" className="e-btn e-info">Reverse Slide Out </ButtonComponent>
</div>
</div>
</div>);
}
export default App;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';
function App() {
let sidebarObj: SidebarComponent;
let btnObj: ButtonComponent;
let showBackdrop: boolean = true;
function onCreate():void {
sidebarObj.element.style.visibility='';
}
// Zoom Sidebar
function zoom():void {
sidebarObj.show();
sidebarObj.element.classList.add("w3-animate-zoom");
}
// Open Door
function open_door():void {
sidebarObj.show();
const sidebar: Element =document.getElementsByClassName("e-sidebar-overlay")[0];
sidebar.classList.add("move");
}
// Bottom to Top
function bottom_top(): void {
sidebarObj.show();
sidebarObj.element.classList.add("w3-animate-bottom");
}
// Rotate
function rotate(): void {
sidebarObj.show();
sidebarObj.element.classList.add("rotate");
}
// Rotate 3D Effect
function rotate_3d(): void {
sidebarObj.show();
sidebarObj.element.classList.add("rotate_3d");
}
// Reverse Slide Out
function reverse(): void {
sidebarObj.show();
sidebarObj.element.classList.add("reverse_slide_out");
}
// Close Sidebar Element
function close(): void {
sidebarObj.element.classList.remove("sidebar");
sidebarObj.element.classList.remove("rotate");
sidebarObj.element.classList.remove("w3-animate-zoom");
sidebarObj.element.classList.remove("w3-animate-bottom");
sidebarObj.element.classList.remove("rotate_3d");
sidebarObj.element.classList.remove("reverse_slide_out");
sidebarObj.hide();
}
return (
// Declaration of Sidebar Element
<div className="control-section">
<SidebarComponent id="sidebar-element" className="sidebar" ref={Sidebar => sidebarObj = Sidebar as SidebarComponent} showBackdrop={showBackdrop} style={{visibility:"hidden"}} created={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={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={zoom} id="zoom" className="e-btn e-info">Zoom Sidebar</ButtonComponent>
<ButtonComponent onClick={open_door} id="open_door" className="e-btn e-info">Open Door</ButtonComponent>
<ButtonComponent onClick={bottom_top} id="bottom_top" className="e-btn e-info">Bottom to Top </ButtonComponent>
</div>
<div className="center-align">
<ButtonComponent onClick={rotate} id="rotate" className="e-btn e-info">Rotate</ButtonComponent>
<ButtonComponent onClick={rotate_3d} id="rotate_3d" className="e-btn e-info">Rotate 3D</ButtonComponent>
<ButtonComponent onClick={reverse} id="reverse" className="e-btn e-info">Reverse Slide Out </ButtonComponent>
</div>
</div>
</div>
)
}
export default App;import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));