Syncfusion AI Assistant

How can I help you?

Animation in EJ2 TypeScript

6 Feb 20267 minutes to read

The Animation is used to perform animation effects on HTML elements by running a sequence of frames. It can be used to enhance the user experience.

The Syncfusion® Animation library supports animating HTML elements using the animate method. This method adds the e-animate, e-animation-id attributes, and CSS styles to the HTML element, then removes them after the animation effect is completed.

Animation effects

An animation effect refers to the visual change that occurs over a period of time in HTML elements. The Animation library supports different types of animation effects. The name property is used to specify the animation effect of an animation.

The following is an example code snippet using the FadeOut and ZoomOut animation effects:

import {Animation} from '@syncfusion/ej2-base';

let animation: Animation = new Animation();
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    </div>
</body>

</html>

Animation duration

Animation duration is the property that specifies the length of time an animation should take to complete. The animation duration is specified in milliseconds (ms) and determines the total amount of time an animation should run.

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.

The following is an example code snippet using animation effects with a duration of 5000 milliseconds:

import {Animation} from '@syncfusion/ej2-base';

let animation: Animation = new Animation({ duration: 5000 });
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    </div>
</body>

</html>

Animation delay

The animation delay is the property that specifies the amount of time to wait before starting an animation. The animation delay is specified in milliseconds (ms) and determines the amount of time that should elapse before an animation begins.

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.

The following is an example code snippet using animation effects with a delay of 2000 milliseconds:

import {Animation} from '@syncfusion/ej2-base';

let animation: Animation = new Animation({ delay: 2000, duration: 5000 });
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    </div>
</body>

</html>

Enable or disable animation globally

Enable or disable animation for all EJ2 TypeScript controls globally by using the setGlobalAnimation method with one of the following options:

  • GlobalAnimationMode.Enable - Enables animation for all components, regardless of individual component animation settings.
  • GlobalAnimationMode.Disable - Disables animation for all components, regardless of individual component animation settings.
  • GlobalAnimationMode.Default - Animation is enabled or disabled based on each component’s animation settings.

In the following code snippet, animation is disabled globally.

import { GlobalAnimationMode, setGlobalAnimation } from "@syncfusion/ej2-base";

setGlobalAnimation(GlobalAnimationMode.Disable);

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