The Animation is used to perform animation effects on HTML elements by running a sequence of frames.
Syncfusion Essential JS2 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 * 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'));<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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'));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 * 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'));<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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'));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 * 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'));<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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'));