Animation Support in Syncfusion^® Angular Components

2 Feb 20266 minutes to read

Animations enhance the user interface by applying smooth transitions and visual effects to HTML elements through a sequence of frames. Syncfusion^®’s Animation library provides a robust way to implement these effects in Angular applications.

The animate method animates specified HTML elements by temporarily adding the e-animate and e-animation-id attributes, along with the necessary CSS transition or animation styles, which are removed once the effect completes.

Animation Effects

Animation effects determine how elements transform visually. Specify an effect using the name property of the Animation class.

The base Animation library supports the following common effects (note: some components provide additional or composite effects; refer to individual component documentation for specifics):

• Fade: FadeIn, FadeOut — Elements gradually appear or disappear.
• Zoom: ZoomIn, ZoomOut — Elements scale up or down in size.
• Slide: SlideLeftIn, SlideLeftOut, SlideRightIn, SlideRightOut, SlideUpIn, SlideUpOut, SlideDownIn, SlideDownOut — Elements slide into or out of view from different directions.
• Rotate: RotateIn, RotateOut – Rotate elements during transition
• Scale: ScaleIn, ScaleOut – Resize elements smoothly
  For the full and up-to-date list of supported effects, see the Effect API reference. Effects like Rotate or pure Scale are not natively supported in the base library and may be available only in specific components.

The following example demonstrates the FadeOut and ZoomOut 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 duration property sets the length of the animation in milliseconds.

A value of 2000 ms results in a 2-second animation. Shorter durations create faster transitions, while longer ones produce slower, more deliberate effects.

Example with a 5000 ms duration:

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 delay property defines the wait time (in milliseconds) before the animation begins.

A 2000 ms delay postpones the start by 2 seconds, which is useful for creating sequenced or staggered animations.

Example with 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 Animations Globally

Use the setGlobalAnimation function from @syncfusion/ej2-base to control animations across all Syncfusion Angular components:

• GlobalAnimationMode.Enable — Enables animations everywhere, overriding component defaults.
• GlobalAnimationMode.Disable — Disables all script-based animations.
• GlobalAnimationMode.Default — Respects each component’s individual animation settings.

Example disabling animations globally:

~/src/src/app.component.ts

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

setGlobalAnimation(GlobalAnimationMode.Disable);

Note: The setGlobalAnimation method affects only animations managed by the Syncfusion Animation library (script-level). It does not impact CSS-defined animations applied via classes or inline styles.