Bootstrap : animation in modal window

Question

i want to use wow.js animations (with animate.css) in a modal window of bootstrap like this

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
          <div class="container">
             <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInLeft">
                   <p>Animation from Right</p>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInRight">
                   <p>Animation from Right</p>
                </div>
             </div> 
          </div>
      </div>

    </div>

  </div>
</div> 

i included wow.js, animate.css , animations are working properly in the page but in modal window it does not work , Need your help with this please

Answer 1

It's not working because when you call wow.init() , the lightbox element doesn't exist yet.

You need to call either wow.init() or wow.sync() after the element is created (ie when it is opened) in order for the wow code to find the element.

Bootstrap can run a callback when the modal is created and shown. Yours will end up looking something like this

$('#myModal').on('shown.bs.modal', function () {
  wow.sync()
})