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.
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:
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/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.
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:
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/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>
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:
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/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>