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 11 and Material Design 2.0. 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.


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

On hover

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

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.

On scroll

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

Repeat animation on scroll

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.


Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

List group

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

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);
            }
          }