Animation in Vue

27 Jun 202511 minutes to read

The Animation is used to perform animation effects on HTML elements by running a sequence of frames. It can be used to enhance the user experience.

Syncfusion® Animation 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

An animation effect refers to the visual change that occurs over a period of time in HTML elements. The Animation library supports different types of animation effects. The name property is used to specify the animation effect of an animation.

Here is an example code snippet using the FadeOut and ZoomOut animation effects:

<template>
    <div id='container'>
        <div ref='element1' id='element1'></div>
        <div ref='element2' id='element2'></div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { Animation } from '@syncfusion/ej2-base';

const element1 = ref(null);
const element2 = ref(null);

onMounted(() => {
    var animation = new Animation();
    animation.animate(element1.value, { name: 'FadeOut' });
    animation.animate(element2.value, { 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>
<template>
     <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    </div>
</template>
<script>
    import { Animation } from '@syncfusion/ej2-base';
    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>

Animation duration

Animation duration is the animation property that specifies the length of time that an animation should take to complete. The animation duration is specified in milliseconds (ms) and determines the total amount of time that an animation should run.

For example, if an animation has a duration of 2 seconds, it will take 2 seconds to complete from start to finish. The duration of an animation affects the overall pace of the animation and can be adjusted to match the desired speed and style of the animation.

The value of the animation duration can be adjusted to change the speed of the animation, with shorter durations resulting in faster animations and longer durations resulting in slower animations.

Here is an example code snippet using the animation effects with a duration of 5000 milliseconds:

<template>
    <div id='container'>
        <div ref='element1' id='element1'></div>
        <div ref='element2' id='element2'></div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { Animation } from '@syncfusion/ej2-base';

const element1 = ref(null);
const element2 = ref(null);

onMounted(() => {
    var animation = new Animation({ duration: 5000 });
    animation.animate(element1.value, { name: 'FadeOut' });
    animation.animate(element2.value, { 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>
<template>
    <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    </div>
</template>
<script>
import { Animation } from '@syncfusion/ej2-base';
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 animation delay is the animation property that specifies the amount of time to wait before starting an animation. The animation delay is specified in milliseconds (ms) and determines the amount of time that should elapse before an animation begins.

For example, if an animation has a delay of 2 seconds, it will wait for 2 seconds before starting. This can be useful in creating more complex animations, where multiple elements are animated in sequence, or in creating animations that start only after a user interaction has taken place.

Here is an example code snippet using the animation effects with a delay of 2000 milliseconds:

<template>
    <div id='container'>
        <div ref='element1' id='element1'></div>
        <div ref='element2' id='element2'></div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { Animation } from '@syncfusion/ej2-base';

const element1 = ref(null);
const element2 = ref(null);

onMounted(() => {
    var animation = new Animation({ delay: 2000, duration: 5000 });
    animation.animate(element1.value, { name: 'FadeOut' });
    animation.animate(element2.value, { 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>
<template>
    <div id='container'>
        <div id='element1'></div>
        <div id='element2'></div>
    </div>
</template>
<script>
import { Animation } from '@syncfusion/ej2-base';
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>

Enable or disable animation globally

Enable or disable animation for all Vue components globally by using the setGlobalAnimation method with one of the below options:

  • GlobalAnimationMode.Enable - Enables the animation for all components, regardless of the individual component’s animation settings.
  • GlobalAnimationMode.Disable - Disables the animation for all components, regardless of the individual component’s animation settings.
  • GlobalAnimationMode.Default - Animation is enabled or disabled based on the component’s animation settings.

In the below code snippet, animation is disabled.

import { GlobalAnimationMode, setGlobalAnimation } from "@syncfusion/ej2-base";

setGlobalAnimation(GlobalAnimationMode.Disable);

setGlobalAnimation method controls script-level animations only, and it is not applicable for direct CSS-level animations (animations defined from CSS classes or properties).