Animations

Angular Bootstrap 5 Animations

Subtle and smooth MDB animations provide the user with a unique experience when interacting with UI. There are several dozen animations at your disposal along with many customization and implementation options.

Animations built with Bootstrap 5, Angular and Material Design. Examples with hover, fadein and on scroll effects. Available loading, card progress bar animations and more.

Note: Read the API tab to find all available options and advanced customization

Move the mouse over the squares below to launch the animation.

fade-in
fade-in-down
fade-in-left
fade-in-right
fade-in-up
fade-out
fade-out-down
fade-out-left
fade-out-right
fade-out-up
slide-in-down
slide-in-left
slide-in-right
slide-in-up
slide-out-down
slide-out-left
slide-out-right
slide-out-up
zoom-in
zoom-out
tada
pulse

Basic example

In order to use animations, import animation functions from mdb-angular-ui-kit and add them to the animations array in the component definition. Then add animation trigger to the element you want to animate.

Assign a variable containing information about the animation state to the animation trigger and change the value from false to true to run the animation.

Click the car to start the animation.

        
            
            <i
              (click)="startAnimation()"
              [@slideInLeft]="animationState"
              (@slideInLeft.done)="onAnimationDone()"
              class="fas fa-car-side fa-3x"
            ></i>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { slideInLeftAnimation } from 'mdb-angular-ui-kit/animations';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
              animations: [
                slideInLeftAnimation()
              ],
            })
            export class AppComponent {
              constructor() {}

              animationState = false;

              startAnimation(): void {
                this.animationState = true;
              }

              onAnimationDone(): void {
                this.animationState = false;
              }
            }

Animation list

  • fade-in
  • fade-in-down
  • fade-in-left
  • fade-in-right
  • fade-in-up
  • fade-out
  • fade-out-down
  • fade-out-left
  • fade-out-right
  • fade-out-up
  • slide-in-down
  • slide-in-left
  • slide-in-right
  • slide-in-up
  • slide-out-dDown
  • slide-out-left
  • slide-out-right
  • slide-out-up
  • zoom-in
  • zoom-out
  • tada
  • pulse
  • drop-in
  • drop-out
  • fly-in
  • fly-in-up
  • fly-in-down
  • fly-in-left
  • fly-in-right
  • fly-out
  • fly-out-up
  • fly-out-down
  • fly-out-left
  • fly-out-right
  • browse-in
  • browse-out
  • browse-out-left
  • browse-out-right
  • jiggle
  • flash
  • shake
  • glow

Launch options

There are several options for launching the animation.

On click

Use (click) event to start animation on click

        
            
              <i
                (click)="startAnimation()"
                [@slideInLeft]="animationState"
                (@slideInLeft.done)="onAnimationDone()"
                class="fas fa-car-side fa-3x"
              ></i>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { slideInLeftAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                  slideInLeftAnimation()
                ],
              })
              export class AppComponent {
                constructor() {}

                animationState = false;

                startAnimation(): void {
                  this.animationState = true;
                }

                onAnimationDone(): void {
                  this.animationState = false;
                }
              }

On hover

Use (mouseenter) event to launch the animation on mouse hover.

        
            
              <span (mouseenter)="startAnimation()">
                <i
                  [@slideInLeft]="animationState"
                  (@slideInLeft.done)="onAnimationDone()"
                  class="fas fa-car-side fa-3x"
                ></i>
              </span>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { slideInLeftAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                  slideInLeftAnimation()
                ],
              })
              export class AppComponent {
                constructor() {}

                animationState = false;

                startAnimation(): void {
                  this.animationState = true;
                }

                onAnimationDone(): void {
                  this.animationState = false;
                }
              }

On Load

We prepared 'enter' animations for every entrance animation like zoomInAnimation. This type of animation is useful if you want to automatically animate element that is dynamically added in the application view. Refresh the page to see this effect. 

        
            
              <i
                *ngIf="iconVisible"
                [@zoomInEnter]
                class="fas fa-car-side fa-3x"
              ></i>
            
        
    
        
            
              import { Component, OnInit } from '@angular/core';
              import { zoomInEnterAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                zoomInEnterAnimation()
                ],
              })
              export class AppComponent implements OnInit {
                constructor() {}

                iconVisible = false;

                ngOnInit(): void {
                  this.iconVisible = true;
                }
              }

On scroll

Use Intersection Observer API to check if an element is visible on screen and update animation state to display the animation. 

        
            
              <i
                #carIcon
                [@slideInLeft]="animationState"
                class="fas fa-car-side fa-3x"
              ></i>
            
        
    
        
            
              import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
              import { slideInLeftAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                  slideInLeftAnimation()
                ],
              })
              export class AppComponent implements AfterViewInit {
                @ViewChild('carIcon') carIcon: ElementRef;

                constructor() {}

                animationState = false;

                ngAfterViewInit(): void {
                  const observer = new IntersectionObserver((entries) => {
                    entries.forEach((entry) => {
                      if (entry.intersectionRatio > 0) {
                        this.animationState = true;
                        observer.unobserve(entry.target);
                      } else {
                        this.animationState = false;
                      }
                    });
                  });

                  observer.observe(this.carIcon.nativeElement);
                }
              }

Repeat animation on scroll

        
            
                <i
                  #carIcon
                  [@slideInLeft]="animationState"
                  class="fas fa-car-side fa-3x"
                ></i>
            
        
    
        
            
              import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
              import { slideInLeftAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                  slideInLeftAnimation()
                ],
              })
              export class AppComponent implements AfterViewInit {
                @ViewChild('carIcon') carIcon: ElementRef;

                constructor() {}

                animationState = false;

                ngAfterViewInit(): void {
                  const observer = new IntersectionObserver((entries) => {
                    entries.forEach((entry) => {
                      if (entry.intersectionRatio > 0) {
                        this.animationState = true;
                      } else {
                        this.animationState = false;
                      }
                    });
                  });

                  observer.observe(this.carIcon.nativeElement);
                }
              }

Show on load

If you use animation onScroll, by default all elements are visible when the page is loaded. They disappear and begin to animate after the first scroll. You can hide the elements and use entrance animations to display animation when element will be visible. However, remember that this may have a negative impact on SEO. 

        
            
              <div #iconWrapper>
                <i
                  *ngIf="iconVisible"
                  [@slideInLeftEnter]
                  class="fas fa-car-side fa-3x"
                ></i>
              </div>
            
        
    
        
            
              import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
              import { slideInLeftEnterAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                  slideInLeftEnterAnimation()
                ],
              })
              export class AppComponent implements AfterViewInit {
                @ViewChild('iconWrapper') iconWrapper: ElementRef;

                constructor() {}

                iconVisible = false;

                ngAfterViewInit(): void {
                  const observer = new IntersectionObserver((entries) => {
                    entries.forEach((entry) => {
                      if (entry.intersectionRatio > 0) {
                        this.iconVisible = true;
                      } else {
                        this.iconVisible = false;
                      }
                    });
                  });

                  observer.observe(this.iconWrapper.nativeElement);
                }
              }

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

        
            
              <div class="d-flex justify-content-around">
                <div>
                  <button class="btn btn-primary me-5" (click)="externalClickState = true">
                    Animation on Click
                  </button>
                  <i
                    id="animate-click"
                    [@slideInLeft]="externalClickState"
                    (@slideInLeft.done)="externalClickState = false"
                    class="fas fa-car-side fa-3x"
                  ></i>
                </div>
                <div>
                  <button class="btn btn-primary me-5" (mouseenter)="externalHoverState = true">
                    Animation on Hover
                  </button>
                  <i
                    id="animate-hover"
                    [@slideInLeft]="externalHoverState"
                    (@slideInLeft.done)="externalHoverState = false"
                    class="fas fa-car-side fa-3x"
                  ></i>
                </div>
              </div>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { slideInLeftAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                  slideInLeftAnimation()
                ],
              })
              export class AppComponent {
                constructor() {}

                externalClickState = false;
                externalHoverState = false;
              }

List group

Click "Add" button to add a new item to the list.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
        
            
              <div class="d-flex">
                <div class="card" style="width: 18rem;">
                  <ul id="example-list" class="list-group list-group-flush">
                    <li
                      [@fadeInEnter]
                      [@fadeOutLeave]
                      *ngFor="let item of items; let i = index"
                      class="list-group-item"
                      (click)="removeItem(i)"
                    >
                      {{ item.title }}
                    </li>
                  </ul>
                </div>
                <div class="ms-3">
                  <button class="btn btn-primary" id="add" (click)="addItem()">add</button>
                </div>
              </div>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { fadeInEnterAnimation, fadeOutLeaveAnimation } from 'mdb-angular-ui-kit/animations';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
                animations: [
                  fadeInEnterAnimation(),
                  fadeOutLeaveAnimation(),
                ],
              })
              export class AppComponent {
                items = [
                  { title: 'Cras justo odio' },
                  { title: 'Dapibus ac facilisis' },
                  { title: 'Vestibulum at eros' },
                ];

                itemIndex = 1;

                constructor() {}

                addItem(): void {
                  const newItem = { title: `element ${this.itemIndex}` };
                  this.items.push(newItem);
                  this.itemIndex += 1;
                }

                removeItem(index: number): void {
                  this.items.splice(index, 1);
                }
              }

Animations - API

Import

        
            
          import { Component } from '@angular/core';
          import {
            slideInLeftAnimation,
            slideInLeftEnterAnimation,
            slideOutLeftAnimation,
            slideOutLeftLeaveAnimation
          } from 'mdb-angular-ui-kit/animations';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./aoo.component.scss'],
            animations: [
              slideInLeftAnimation(),
              slideInLeftEnterAnimation(),
              slideOutLeftAnimation(),
              slideOutLeftLeaveAnimation()
            ],
          })
          export class AppComponent {}

Options

Name Type Default Description
delay Number 0 Set animation delay.
duration number 500 Set animation duration.
trigger string e.g. slideInLeft Change animation trigger name.

Outputs

Name Description
(animationTrigger.start) This callback fires when animation starts.
(animationTrigger.end) This callback starts immediately after the animation has finished. 
        
            
          <i
            (click)="startAnimation()"
            [@slideInLeft]="animationState"
            (@slideInLeft.start)="onAnimationStart($event)"
            (@slideInLeft.done)="onAnimationDone($event)"
            class="fas fa-car-side fa-3x"
          ></i>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { AnimationEvent } from '@angular/animations';
          import { slideInLeftAnimation } from 'mdb-angular-ui-kit/animations';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./aoo.component.scss'],
            animations: [
              slideInLeftAnimation()
            ],
          })
          export class AppComponent {
            constructor() {}

            animationState = false;

            startAnimation(): void {
              this.animationState = true;
            }

            onAnimationStart(event: AnimationEvent): void {
              console.log('animation start event', event);
            }

            onAnimationDone(event: AnimationEvent): void {
              console.log('animation done event', event);
            }
          }