Animation in Angular Stepper component

10 Sep 20252 minutes to read

The Angular Stepper component supports animations for smooth transitions during step navigation, enhancing user experience in workflows like forms or wizards. Configure animations using the animation property of the ejs-stepper component, which accepts a StepperAnimationSettingsModel object. Animations can be customized with duration, delay, and enable settings.

You can disable the animation by setting the enable property to false. By default, the value is true.

The following table describes the fields of the animation property:

Fields	Type	Description
duration	number	Specifies the duration of the animated transition for each step in milliseconds. The default value is 2000.
delay	number	Specifies the delay before initiating the animated transition for each step in milliseconds. The default value is 0.

The example demonstrates animation settings with customized duration and delay for the Stepper component.

app.component.ts

import { Component } from "@angular/core";
import { StepperAnimationSettingsModel, StepperAllModule, StepperModule } from "@syncfusion/ej2-angular-navigations";

@Component({
  imports: [ StepperAllModule, StepperModule ],
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  public animateStepper: StepperAnimationSettingsModel = {enable: true, duration: 2000, delay: 500};
}

main.ts

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

app.component.html

<div class="stepperAnimation">
  <ejs-stepper [animation]="animateStepper">
    <e-steps>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
    </e-steps>
  </ejs-stepper>
</div>