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

Animation

01 Feb 2023 / 3 minutes to read

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.

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

#element2 {
    margin-left: 20px;
}
</style>

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
app.vue
Copied to clipboard
<template>
     <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    </div>
</template>
<script>
    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' });
        }
    }
</script>
<style>
  
#element1, #element2 {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    float: left;
    height: 100px;
    width:100px;
}

#element2 {
    margin-left: 20px;
}
</style>

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

#element2 {
    margin-left: 20px;
}
</style>
Previous
Next