Search results


05 Oct 2022 / 1 minute to read

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

Animating a HTML Element

The animate method of Animation library can be used to animate the HTML elements. This method can also take additional AnimationModel. Refer the below code snippet to animate a multiple DOM element.

Copied to clipboard
     <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    import { Animation } from '@syncfusion/ej2-base';
    import Vue from "vue";
    export default {
        mounted: function () {
            var animation = new Animation({ duration: 5000 });
            animation.animate('#element1', { name: 'FadeOut' });
            animation.animate('#element2', { name: 'ZoomOut' });
#element1, #element2 {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    float: left;
    height: 100px;

#element2 {
    margin-left: 20px;