HelpBot Assistant

How can I help you?

Animation in React Toast component

20 Feb 202619 minutes to read

The Toast component supports customizable animations for display and dismissal, enhancing the visual feedback of notification appearance and removal. Configure enter and exit animations using standard animation library options. By default, toasts use FadeIn animation when appearing and FadeOut animation when disappearing. Custom animations create smoother user experience and draw attention to important notifications.

Accessibility note: Consider users who prefer reduced motion. Toasts respecting the prefers-reduced-motion media query will minimize or disable animations for accessibility compliance.

[Class-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    toastInstance;
    timeOutDelay = 600;
    position = { X: 'Right', Y: 'Bottom' };
    animation;
    style = { paddingTop: '20px' };
    dropDownShowInstance;
    dropDownHideInstance;
    AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];
    toastCreated() {
        this.toastShow();
    }
    toastShow() {
        setTimeout(() => {
            this.toastInstance.show();
        }, this.timeOutDelay);
    }
    btnClick() {
        this.toastShow();
    }
    valueChange() {
        this.toastInstance.animation.show = { effect: this.dropDownShowInstance.value };
    }
    valueChangeHide() {
        this.toastInstance.animation.hide = { effect: this.dropDownHideInstance.value };
    }
    render() {
        return (<div>
        <ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast</ButtonComponent>
        <div className='e-row' style={this.style}>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Show Animation</label>
          </div>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => this.dropDownShowInstance = drop} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChange = this.valueChange.bind(this)} index={0}/>
          </div>
        </div>
        <div className='e-row' style={this.style}>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Hide Animation</label>
          </div>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => this.dropDownHideInstance = drop} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChangeHide = this.valueChangeHide.bind(this)} index={0}/>
          </div>
        </div>
        <ToastComponent ref={toast => this.toastInstance = toast} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} animation={this.animation} showProgressBar='true' created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;
import { Effect } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public toastInstance: ToastComponent;
  public timeOutDelay: number = 600;
  public position = { X: 'Right', Y: 'Bottom' };
  public animation: { show: { effect: 'SlideRightIn' }, hide: { effect: 'SlideLeftOut' } };
  public style = { paddingTop: '20px' };
  public dropDownShowInstance: DropDownListComponent;
  public dropDownHideInstance: DropDownListComponent;
  public AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];

  public toastCreated(): void {
    this.toastShow();
  }

  public toastShow() {
    setTimeout(
      () => {
        this.toastInstance.show();
      }, this.timeOutDelay);
  }

  public btnClick(): void {
    this.toastShow()
  }

  public valueChange(): void {
    this.toastInstance.animation.show = { effect: this.dropDownShowInstance.value as Effect };
  }

  public valueChangeHide(): void {
    this.toastInstance.animation.hide = { effect: this.dropDownHideInstance.value as Effect };
  }

  public render() {
    return (
      <div>
        <ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast</ButtonComponent>
        <div className='e-row' style={this.style}>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Show Animation</label>
          </div>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => this.dropDownShowInstance = drop!} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChange = this.valueChange.bind(this)} index={0} />
          </div>
        </div>
        <div className='e-row' style={this.style}>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Hide Animation</label>
          </div>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => this.dropDownHideInstance = drop!} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChangeHide = this.valueChangeHide.bind(this)} index={0} />
          </div>
        </div>
        <ToastComponent ref={toast => this.toastInstance = toast!} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} animation={this.animation} showProgressBar='true' created={this.toastCreated = this.toastCreated.bind(this)} />
      </div>
    );
  }
};
export default App;

[Functional-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
    let toastInstance;
    let timeOutDelay = 600;
    let position = { X: 'Right', Y: 'Bottom' };
    let animation;
    let style = { paddingTop: '20px' };
    let dropDownShowInstance;
    let dropDownHideInstance;
    let AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];
    function toastCreated() {
        toastShow();
    }
    function toastShow() {
        setTimeout(() => {
            toastInstance.show();
        }, timeOutDelay);
    }
    function btnClick() {
        toastShow();
    }
    function valueChange() {
        toastInstance.animation.show = { effect: dropDownHideInstance.value };
    }
    function valueChangeHide() {
        toastInstance.animation.hide = { effect: dropDownHideInstance.value };
    }
    return (<div>
        <ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast</ButtonComponent>
        <div className='e-row' style={style}>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Show Animation</label>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => dropDownShowInstance = drop} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChange.bind(this)} index={0}/>
        </div>
        </div>
        <div className='e-row' style={style}>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Hide Animation</label>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => dropDownHideInstance = drop} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChangeHide.bind(this)} index={0}/>
        </div>
        </div>
        <ToastComponent ref={toast => toastInstance = toast} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={position} showProgressBar={true} created={toastCreated.bind(this)} animation={animation}/>
    </div>);
}
;
export default App;
import { Effect } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

function App(){
    let toastInstance: ToastComponent;
    let timeOutDelay: number = 600;
    let position = { X: 'Right', Y: 'Bottom' };
    let animation: { show: { effect: 'SlideRightIn' }, hide: { effect: 'SlideLeftOut' } };
    let style = { paddingTop: '20px' };
    let dropDownShowInstance: DropDownListComponent;
    let dropDownHideInstance: DropDownListComponent;
    let AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];
  
    function toastCreated(): void {
      toastShow();
    }
  
    function toastShow() {
      setTimeout(
        () => {
          toastInstance.show();
        }, timeOutDelay);
    }
  
    function btnClick(): void {
      toastShow()
    }
  
    function valueChange(): void {
      toastInstance.animation.show = { effect: dropDownHideInstance.value as any}
    }
  
    function valueChangeHide(): void {
      toastInstance.animation.hide = { effect: dropDownHideInstance.value as any };
    }
  
    return (
    <div>
        <ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast</ButtonComponent>
        <div className='e-row' style={style}>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Show Animation</label>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => dropDownShowInstance = drop!} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChange.bind(this)} index={0} />
        </div>
        </div>
        <div className='e-row' style={style}>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <label>Hide Animation</label>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent ref={drop => dropDownHideInstance = drop!} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChangeHide.bind(this)} index={0} />
        </div>
        </div>
        <ToastComponent ref={toast => toastInstance = toast!} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?'  position={position} showProgressBar={true} created={toastCreated.bind(this)} animation={animation} />
    </div>
    );
};
export default App;