Animation Support in Syncfusion^® Angular Components

14 Aug 20256 minutes to read

Animations enhance the user interface by executing a series of frames, resulting in smooth transitions and effects. Syncfusion^®’s Animation library enables these animations effectively.

The animate method aids in animating HTML elements by temporarily applying e-animate and e-animation-id attributes, alongside CSS styles, for the effect duration.

Animation effects

Animation effects define how elements visually transform during the animation. Syncfusion provides a variety of built-in effects that can be specified using the name property.

Example code utilizing the FadeOut and ZoomOut animation effects:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({
standalone: true,
  selector: 'app-root',
  template: `
    <div #element1 class='animation1'></div>
    <div #element2 class='animation2'></div>
    `,
 styleUrls: ['../index.css']
})

export class AppComponent {
  @ViewChild('element1',{static: false})element1: any;
  @ViewChild('element2',{static: false})element2: any;

  ngAfterViewInit() {
    let animation: Animation = new Animation({});
    animation.animate(this.element1.nativeElement, { name: 'FadeOut' });
    animation.animate(this.element2.nativeElement, { name: 'ZoomOut' });
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Animation Timing Properties

Duration

The animation duration defines the total time an animation takes to run, measured in milliseconds.

For instance, an animation with a 2000ms duration completes in 2 seconds. The duration impacts the animation pace—shorter times yield faster movements, while longer durations slow it down.

Example utilizing 5000ms for animation effects:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({

standalone: true,
  selector: 'app-root',
  template: `
    <div #element1 class='animation1'></div>
    <div #element2 class='animation2'></div>
    `,
  styleUrls: ['../index.css']  
})

export class AppComponent {
  @ViewChild('element1',{static: false})element1: any;
  @ViewChild('element2',{static: false})element2: any;

  ngAfterViewInit() {
    let animation: Animation = new Animation({ duration: 5000 });
    animation.animate(this.element1.nativeElement, { name: 'FadeOut' });
    animation.animate(this.element2.nativeElement, { name: 'ZoomOut' });
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Delay

The animation delay property specifies the waiting time before an animation begins, also measured in milliseconds.

For example, a 2000ms delay pauses the animation for 2 seconds before it starts. This is valuable for sequential animations or event-triggered actions.

Example using a 2000ms delay:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({
standalone: true,
  selector: 'app-root',
  template: `
    <div #element1 class='animation1'></div>
    <div #element2 class='animation2'></div>
    `,
  styleUrls: ['../index.css']
})

export class AppComponent {
  @ViewChild('element1',{static: false})element1: any;
  @ViewChild('element2',{static: false})element2: any;

  ngAfterViewInit() {
    let animation: Animation = new Animation({ delay: 2000, duration: 5000 });
    animation.animate(this.element1.nativeElement, { name: 'FadeOut' });
    animation.animate(this.element2.nativeElement, { name: 'ZoomOut' });
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable or disable animation globally

Control animations for all Angular components globally with the setGlobalAnimation method:

• GlobalAnimationMode.Enable – Activates animations for all components.
• GlobalAnimationMode.Disable – Deactivates animations for all components.
• GlobalAnimationMode.Default – Respects the component-specific animation settings.

The example below demonstrates disabling animations:

~/src/src/app.component.ts

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).