Fancy Modal Animations With jQuery And CSS3 - modalAnimate.js

modalAnimate.js is a jQuery plugin that lets you create fullscreen modal windows with pretty cool CSS3 powered animations when opening and closing.

CSS3 animations included:

• Unfolding
• Revealing
• Uncovering
• Blow Up
• Meep Meep
• Sketch
• Bond
• Or your own CSS3 animations.

How to use it:

1. Load jQuery library together with the 'modalanimate.css' and 'modalanimate.js' files in your html document.

<link rel="stylesheet" href="css/modalanimate.css">
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/modalAnimate.js"></script>

2. Create the html for the modal window.

<div id="modal-container">
  <div class="modal-background">
    <div class="modal">
      <h2>I'm a Modal</h2>
      <p>Hear me roar.</p>
      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
      </svg>
    </div>
  </div>
</div>

3. Show the modal window with an unfolding animation.

$.modalAnimate();

4. Change the default modal container.

$.modalAnimate({
  modalTarget:'modal-container'
});

5. Change the default modal animation.

$.modalAnimate({
  // or ...
  // 'revealing'
  // 'unfolding'
  // 'blown-up'
  // 'meep'
  // 'sketch'
  // 'bond'
  effect:'unfolding',
});

6. Trigger a custom callback function on modal close.

$.modalAnimate({
  modalClose: function() {}
});

7. Show the modal window on page load.

$.modalAnimate({
  autoEffect: true
});

---

This awesome jQuery plugin is developed by sumn2u. For more Advanced Usages, please check the demo page or visit the official website.