JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Animation

25 Jan 2023 / 2 minutes to read

The Animation is used to perform animation effects on HTML elements by running a sequence of frames.

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

Animation effects

The Animation library supports different types of effects. The name property of the AnimationModel is used to set the animation effect. Here is an example code snippet using the FadeOut and ZoomOut animation effects:

Source
Preview
index.ts
index.html
Copied to clipboard
import {Animation} from '@syncfusion/ej2-base';

let animation: Animation = new Animation();
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
Copied to clipboard
<!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/20.4.38/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>

To know more about the types of animation effects, refer to the animation effects section.

Animation duration

The duration property of the Animation class is used to set the duration of the animation effect. Here is an example code snippet using the animation effects with the duration of 5000 milliseconds:

Source
Preview
index.ts
index.html
Copied to clipboard
import {Animation} from '@syncfusion/ej2-base';

let animation: Animation = new Animation({ duration: 5000 });
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
Copied to clipboard
<!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/20.4.38/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 delay property of the Animation class is used to delay the start of the animation effect. Here is an example code snippet using the animation effects with the delay of 2000 milliseconds:

Source
Preview
index.ts
index.html
Copied to clipboard
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' });
Copied to clipboard
<!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/20.4.38/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>
Previous
Next