Animations

Step 1 - how animations work

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

1. First, add the class .animated to the element you want to animate.

2. Then, add the .swing class to the same element

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

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

    

At your disposal are 74 animations. Instead of using the .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 upon page scroll.

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

        new WOW().init();

    

Next, add the CSS class .wow to an 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, please remember to initialize the animations.

Now we will add a 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 every section in our project.

First, 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.4.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 :)