CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapjquery-animate
Sikander
Sikander

Reputation: 2835

Bootstrap : animation in modal window

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

Upvotes: 2

Views: 1336

Answers (1)

Tyler
Tyler

Reputation: 11509

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 (i.e. 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()
})

Upvotes: 1

Related Questions