Animation support in Syncfusion Angular Components

31 Jan 20255 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 are visual changes over time for HTML elements. Various effects are supported, 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 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));

Animation delay

An animation delay indicates the wait time before an animation initiates, also 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).