Author: Michal Szymanski
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.png" 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:
.bounce
.flash
.pulse
.rubberBand
.shake
.headShake
.swing
.tada
.wobble
.jello
.jackInTheBox
.heartBeat
.bounceIn
.bounceInDown
.bounceInLeft
.bounceInRight
.bounceInUp
.bounceOut
.bounceOutDown
.bounceOutLeft
.bounceOutRight
.bounceOutUp
.fadeIn
.fadeInDown
.fadeInDownBig
.fadeInLeft
.fadeInLeftBig
.fadeInRight
.fadeInRightBig
.fadeInUp
.fadeInUpBig
.fadeOut
.fadeOutDown
.fadeOutDownBig
.fadeOutLeft
.fadeOutLeftBig
.fadeOutRight
.fadeOutRightBig
.fadeOutUp
.fadeOutUpBig
.flipInX
.flipInY
.flipOutX
.flipOutY
.lightSpeedIn
.lightSpeedOut
.rotateIn
.rotateInDownLeft
.rotateInDownRight
.rotateInUpLeft
.rotateInUpRight
.rotateOut
.rotateOutDownLeft
.rotateOutDownRight
.rotateOutUpLeft
.rotateOutUpRight
.hinge
.rollIn
.rollOut
.zoomIn
.zoomInDown
.zoomInLeft
.zoomInRight
.zoomInUp
.zoomOut
.zoomOutDown
.zoomOutLeft
.zoomOutRight
.zoomOutUp
.slideInDown
.slideInLeft
.slideInRight
.slideInUp
.slideOutDown
.slideOutLeft
.slideOutRight
.slideOutUp
Step 2 - reveal animations when scrolling
Thanks to MDB you can easily launch an animation upon page scroll.
.jpg)
.jpg)
.jpg)
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 :)
Previous lesson Live preview Next lesson
Spread the word: