How To Tell When Bootstrap Modal Is Done Animating

Footstep one - how animations work

Using animations in MDB is very simple. To accomplish the same effect equally above:

ane. Starting time, add together the class .animated to the element you want to breathing.

2. And so, add the .swing class to the same element

3. Add the .space course if y'all wish to achieve the outcome of the infinite animation.

HTML

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

At your disposal are 74 animations. Instead of using the .swing class y'all can use one of the post-obit classes:

.bounce
.flash
.pulse
.rubberBand
.milk 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

Footstep 2 - reveal animations when scrolling

Thanks to MDB you tin 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.

JavaScript

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

HTML

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

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

HTML

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

Step 3 - calculation multiple animations at once

Note: Before starting this footstep, please remember to initialize the animations.

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

First, add the post-obit function beneath the scripts, but above the initialization of the animation:

JavaScript

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

Your script section should wait like this:

HTML

                                  <!-- SCRIPTS -->     <!-- JQuery -->     <script type="text/javascript" src="js/jquery-iii.4.1.min.js"></script>     <!-- Bootstrap tooltips -->     <script type="text/javascript" src="js/popper.min.js"></script>     <!-- Bootstrap cadre JavaScript -->     <script blazon="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       $(office () {         $("#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 gyre down your portfolio. The animations are subtle and elegant.

Congratulations! Your project is washed :)