Animation in Syncfusion ASP.NET MVC

13 Sep 20232 minutes to read

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

Animation Supported controls

The following list demonstrates the Syncfusion ASP.NET MVC control documents that are supported with Animation.

• Accordion
• Accumulation Chart
• Bullet Chart
• Chart
• Circular Gauge
• Context Menu
• Dialog
• In-place Editor
• ProgressBar
• SideBar
• Tabs
• Toast
• ToolTip
• ListView
• Menu
• Pivot Table
• ProgressButton
• Smith Chart
• Stock Chart
• TreeView

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.

CSHTML

<div id="fade"></div>
<div id="zoom"></div>
<script>
    var animation = new ej.base.Animation({ duration: 5000 });
    animation.animate('#fade', { name: 'FadeOut' });
    animation.animate('#zoom', { name: 'ZoomOut' });
</script>

<style>
    #fade, #zoom {
        background: #333333;
        border: 1px solid #cecece;
        box-sizing: border-box;
        float: left;
        height: 100px;
        width: 100px;
    }
</style>

NOTE

View sample in GitHub

Enable or disable animation globally

Enable or disable animation for all ASP.Net MVC controls 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.

~/_Layout.cshtml

<script>
    ej.base.setGlobalAnimation(ej.base.GlobalAnimationMode.Disable);
</script>

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