Angular Bootstrap Animations

Angular Animations - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap animations are illusions of motions for web elements. +70 animations generated by CSS only, work properly on every browser.

Required external library

Starting with MDB Angular 8, using the following basic animations requires installing and importing an additional library - Animate.css. Install this library from the npmjs repository, and import the animate.css file in the angular.json file. 

        
            
          npm install animate.css@3.7.2 --save
        
        
    
        
            
          "styles": [
            "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
            "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
            "node_modules/animate.css/animate.css",
            "src/styles.scss"
          ],
Transparent MDB Logo

Select an animation

Basic usage

Using our animation is simple.

Step 1: Add the class .animated to the element you want to animate.

Step 2: Add one of the following classes:

  1. .bounce
  2. .flash
  3. .pulse
  4. .rubberBand
  5. .shake
  6. .headShake
  7. .swing
  8. .tada
  9. .wobble
  10. .jello
  11. .bounceIn
  12. .bounceInDown
  13. .bounceInLeft
  14. .bounceInRight
  15. .bounceInUp
  16. .bounceOut
  17. .bounceOutDown
  18. .bounceOutLeft
  19. .bounceOutRight
  20. .bounceOutUp
  21. .fadeIn
  22. .fadeInDown
  23. .fadeInDownBig
  24. .fadeInLeft
  25. .fadeInLeftBig
  26. .fadeInRight
  27. .fadeInRightBig
  28. .fadeInUp
  29. .fadeInUpBig
  30. .fadeOut
  31. .fadeOutDown
  32. .fadeOutDownBig
  33. .fadeOutLeft
  34. .fadeOutLeftBig
  35. .fadeOutRight
  36. .fadeOutRightBig
  37. .fadeOutUp
  38. .fadeOutUpBig
  39. .flipInX
  40. .flipInY
  41. .flipOutX
  42. .flipOutY
  43. .lightSpeedIn
  44. .lightSpeedOut
  45. .rotateIn
  46. .rotateInDownLeft
  47. .rotateInDownRight
  48. .rotateInUpLeft
  49. .rotateInUpRight
  50. .rotateOut
  51. .rotateOutDownLeft
  52. .rotateOutDownRight
  53. .rotateOutUpLeft
  54. .rotateOutUpRight
  55. .hinge
  56. .rollIn
  57. .rollOut
  58. .zoomIn
  59. .zoomInDown
  60. .zoomInLeft
  61. .zoomInRight
  62. .zoomInUp
  63. .zoomOut
  64. .zoomOutDown
  65. .zoomOutLeft
  66. .zoomOutRight
  67. .zoomOutUp
  68. .slideInDown
  69. .slideInLeft
  70. .slideInRight
  71. .slideInUp
  72. .slideOutDown
  73. .slideOutLeft
  74. .slideOutRight
  75. .slideOutUp

Step 3 (additionally): You may also want to include the class infinite for an infinite loop.

Transparent MDB Logo 
        
            
          <img class="animated bounce infinite" src="https://mdbootstrap.com/img/logo/mdb-transparent.webp">

Reveal Animations When Scrolling

Thanks to MDB you can easily launch an animation on page scroll.

A view on mountains.
Cottage on a lake surrounded by mountains.
Cyclist riding down the mountain path.
View on mountains from mountain top.
Rocky shore in the morning.
Rocky shore in the morning.

Basic usage

Step 1: Initialize script for animations on a scroll in your index.html .

Step 2: Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.

Step 3: Pick an animation style from the list of animations , then add the CSS class to the HTML element.

Installation

In order to use WOW Animations, add below lines to index.html file before ending </body> tag.

        
            
            <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
            <script>
              new WOW().init();
            </script>

Options

Use one of the custom attributes below to change the behavior of the animations on a scroll.

  1. data-wow-duration: Change the animation duration

  2. data-wow-delay: Delay before the animation starts

  3. data-wow-offset: Distance to start the animation (related to the browser bottom)

  4. data-wow-iteration: Number of times the animation will be repeated

        
            
          <img src="..." class="wow fadeInUp" data-wow-delay="0.6s">

Customize Settings

  1. boxClass: Class name that reveals the hidden box when user scrolls

  2. animateClass: Class name that triggers the CSS animations

  3. offset: Define the distance between the bottom of browser viewport and the top of the hidden box. When the user scrolls and reaches this distance, the hidden box is revealed.

  4. mobile: Turn on/off animations on mobile devices.

  5. live: constantly check for new animated elements on the page

        
            
            wow = new WOW({
              boxClass: 'wow', // default
              animateClass: 'animated', // default
              offset: 0, // default
              mobile: true, // default
              live: true // default
            })
            wow.init();