Animations


Step 1 - how animations work

Using animations in MDB is very simple. To achieve the same effect as above:

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

2. Add .swing class to the same element

3. Add .infinite class if you want to achieve the effect of the infinite animation.



        <img src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png" class="animated swing infinite my-4" alt="">

    

At your disposal are 74 animations. Instead of .swing class you can use 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. .jackInTheBox
  12. .heartBeat
  13. .bounceIn
  14. .bounceInDown
  15. .bounceInLeft
  16. .bounceInRight
  17. .bounceInUp
  18. .bounceOut
  19. .bounceOutDown
  20. .bounceOutLeft
  21. .bounceOutRight
  22. .bounceOutUp
  23. .fadeIn
  24. .fadeInDown
  25. .fadeInDownBig
  26. .fadeInLeft
  27. .fadeInLeftBig
  28. .fadeInRight
  29. .fadeInRightBig
  30. .fadeInUp
  31. .fadeInUpBig
  32. .fadeOut
  33. .fadeOutDown
  34. .fadeOutDownBig
  35. .fadeOutLeft
  36. .fadeOutLeftBig
  37. .fadeOutRight
  38. .fadeOutRightBig
  39. .fadeOutUp
  40. .fadeOutUpBig
  41. .flipInX
  42. .flipInY
  43. .flipOutX
  44. .flipOutY
  45. .lightSpeedIn
  46. .lightSpeedOut
  47. .rotateIn
  48. .rotateInDownLeft
  49. .rotateInDownRight
  50. .rotateInUpLeft
  51. .rotateInUpRight
  52. .rotateOut
  53. .rotateOutDownLeft
  54. .rotateOutDownRight
  55. .rotateOutUpLeft
  56. .rotateOutUpRight
  57. .hinge
  58. .rollIn
  59. .rollOut
  60. .zoomIn
  61. .zoomInDown
  62. .zoomInLeft
  63. .zoomInRight
  64. .zoomInUp
  65. .zoomOut
  66. .zoomOutDown
  67. .zoomOutLeft
  68. .zoomOutRight
  69. .zoomOutUp
  70. .slideInDown
  71. .slideInLeft
  72. .slideInRight
  73. .slideInUp
  74. .slideOutDown
  75. .slideOutLeft
  76. .slideOutRight
  77. .slideOutUp

Step 2 - 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.

First, you have to initialize animations on scroll by using the following function. Place it below the scripts.



        new WOW().init();

    

Next, add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.



        <img src="..." class="wow">

    

Next, pick an animation style from the list of animations , then add the CSS class to the HTML element.



        <img src="..." class="wow fadeInUp">

    

Step 3 - adding multiple animations at once

Note: Before starting this step remember to initialize the animations.

Now we will add fading animation to each section. Adding this one by one for sure isn't the best solution. That's why we will use a simple jQuery function to add automatically the animation to each section existing in our project.

Add the following function below the scripts, but above the initialization of the animation:



        $("section").addClass("wow fadeIn");

    

Your script section should look like this:



    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <!-- MDBootstrap Datatables  -->
    <script type="text/javascript" src="js/addons/datatables.min.js"></script>

    <script>
      // MDB Lightbox Init
      $(function () {
        $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
      });

      // Adding animations to the sections
      $("section").addClass("wow fadeIn");

      // Animations Init
      new WOW().init();
    </script>

    

Save the file, refresh the browser and scroll down your portfolio. The animations are subtle and elegant.



Congratulations! Your project is done :)


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits