Animation in React

20 Aug 202515 minutes to read

The Animation utility is designed to produce animation effects on HTML elements by rendering sequences of frames, enhancing the overall user experience.

The Syncfusion^® Animation library supports animating HTML elements through the animate method. This method applies the e-animate and e-animation-id attributes, along with relevant CSS styles, to the HTML element during the animation and removes them upon completion of the effect.

Animation effects

Animation effects refer to the visual transitions applied to HTML elements over a set duration, contributing to dynamic and engaging interfaces. The Animation library offers a range of animation effects, which can be specified using the name property.

The following code snippets demonstrate use of the FadeOut and ZoomOut animation effects:

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect, useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';
function App() {
    let element1 = useRef();
    let element2 = useRef();
    useEffect(() => {
        let animation = new Animation();
        animation.animate(element1, { name: 'FadeOut' });
        animation.animate(element2, { name: 'ZoomOut' });
    }, []);
    return (<div id="container">
      <div id="element1" ref={(ele) => { element1 = ele; }}></div>
      <div id="element2" ref={(ele) => { element2 = ele; }}></div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect, useRef } from 'react';
import { useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';

function App() {
  let element1 = useRef();
  let element2 = useRef();
  useEffect(() => {
    let animation: Animation = new Animation();
    animation.animate(element1, { name: 'FadeOut' });
    animation.animate(element2, { name: 'ZoomOut' });
  },[])

  return (
    <div id="container">
      <div id="element1" ref={(ele) => { element1 = ele; }}></div>
      <div id="element2" ref={(ele) => { element2 = ele; }}></div>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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 id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Animation duration

Animation duration defines the total time, in milliseconds (ms), that an animation effect takes to complete. This property determines the pacing of visual transitions and allows for adjustment to achieve desired animation speeds.

For example, if an animation has a duration of 2 seconds, it will take 2 seconds to complete from start to finish. The duration of an animation affects the overall pace of the animation and can be adjusted to match the desired speed and style of the animation.

The value of the animation duration can be adjusted to change the speed of the animation, with shorter durations resulting in faster animations and longer durations resulting in slower animations.

Here is an example code snippet using the animation effects with a duration of 5000 milliseconds:

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect, useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';
function App() {
    let element1 = useRef();
    let element2 = useRef();
    useEffect(() => {
        let animation = new Animation({ duration: 5000 });
        animation.animate(element1, { name: 'FadeOut' });
        animation.animate(element2, { name: 'ZoomOut' });
    }, []);
    return (<div id="container">
      <div id="element1" ref={(ele) => { element1 = ele; }}></div>
      <div id="element2" ref={(ele) => { element2 = ele; }}></div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect, useRef } from 'react';
import { useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';

function App() {
  let element1 = useRef();
  let element2 = useRef();
  useEffect(() => {
    let animation: Animation = new Animation({ duration: 5000 });
    animation.animate(element1, { name: 'FadeOut' });
    animation.animate(element2, { name: 'ZoomOut' });
  },[])

  return (
    <div id="container">
      <div id="element1" ref={(ele) => { element1 = ele; }}></div>
      <div id="element2" ref={(ele) => { element2 = ele; }}></div>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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 id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Animation delay

The animation delay property specifies the length of time, in milliseconds (ms), to wait before an animation begins. This setting enables designers to coordinate complex animation sequences or trigger animations after specific user interactions.

For example, if an animation has a delay of 2 seconds, it will wait for 2 seconds before starting. This can be useful in creating more complex animations, where multiple elements are animated in sequence, or in creating animations that start only after a user interaction has taken place.

Here is an example code snippet using the animation effects with a delay of 2000 milliseconds:

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect, useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';
function App() {
    let element1 = useRef();
    let element2 = useRef();
    useEffect(() => {
        let animation = new Animation({ delay: 2000, duration: 5000 });
        animation.animate(element1, { name: 'FadeOut' });
        animation.animate(element2, { name: 'ZoomOut' });
    }, []);
    return (<div id="container">
      <div id="element1" ref={(ele) => { element1 = ele; }}></div>
      <div id="element2" ref={(ele) => { element2 = ele; }}></div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect, useRef } from 'react';
import { useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';

function App() {
  let element1 = useRef();
  let element2 = useRef();
  useEffect(() => {
    let animation: Animation = new Animation({ delay: 2000, duration: 5000 });
    animation.animate(element1, { name: 'FadeOut' });
    animation.animate(element2, { name: 'ZoomOut' });
  },[])

  return (
    <div id="container">
      <div id="element1" ref={(ele) => { element1 = ele; }}></div>
      <div id="element2" ref={(ele) => { element2 = ele; }}></div>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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 id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Enable or disable animation globally

Animations can be enabled or disabled globally for all React components using the setGlobalAnimation method with any of the following modes:

GlobalAnimationMode.Enable — Enables animations for all components, regardless of individual settings.
GlobalAnimationMode.Disable — Disables animations for all components, regardless of individual settings.
GlobalAnimationMode.Default — Uses each component’s own animation configuration.

Below, animation is globally disabled:

~/src/index.js
import { GlobalAnimationMode, setGlobalAnimation } from "@syncfusion/ej2-base";

setGlobalAnimation(GlobalAnimationMode.Disable);

setGlobalAnimation method controls script-level animations only, and it is not applicable for direct CSS-level animations (animations defined from CSS classes or properties).

Search docs

Ask HelpBot