31 Animated Bootstrap popovers and modal live demos by velocity.js

Creating animated modal and popovers with Bootstrap and velocity.js

I have covered a number of plug-ins for creating simple and advanced modal windows that are based on Bootstrap framework. You can read by visiting the links below:

Creating simple modals by using Bootstrap framework is written here. A nice jQuery plug-in (bootstrap3-dialog) is also covered here. Another tutorial for minimizing and maximizing the modal windows can be found here.

I also covered popover enhancement plug-in for Bootstrap popovers here.

In this article, the Bootstrap popovers and modals are created with animations of different styles by using the vanilla.js component.

A demo of 31 animation styles of popovers by velocity.js

In this demo, a total 31 animated popovers are created by using the velocity.js. Just specify the animation style by using the data-easein data attribute as you create a popover. You can see the names of all animation values in the demo page’s code section. A sample popover code is given below:

bootstrap popover animated

See online demo and code

The markup for creating a popover:

A demo of animated modals

Similarly, the modal windows with animation are created by using the data-easein data attribute. The rest remains the same as creating other ordinary modal windows using the Bootstrap framework. See this demo page with a number of modal windows with different animation styles:

bootstrap modal animated

See online demo and code

The sample code for creating a modal with animation:

 

You can see codes of all modal windows in the demo page.

List of values of animation

The following animation values can be set as creating a popover or modal window:

  • fadeIn
  • flipXIn
  • flipYIn
  • flipBounceXIn
  • flipBounceYIn
  • swoopIn
  • whirlIn
  • shrinkIn
  • expandIn
  • bounceIn
  • bounceUpIn
  • bounceDownIn
  • bounceLeftIn
  • bounceRightIn
  • slideUpIn
  • slideDownIn
  • slideLeftIn
  • slideRightIn
  • slideUpBigIn
  • slideDownBigIn
  • slideLeftBigIn
  • slideRightBigIn
  • perspectiveUpIn
  • perspectiveDownIn
  • perspectiveLeftIn
  • perspectiveRightIn
  • tada
  • flash
  • pulse
  • swing
  • bounce

How to setup these popovers and modals into your website?

As your project is based on Bootstrap, so it is highly likely that you have included the CSS and JS files of Bootstrap along with a reference for the jQuery library. For creating animated popover and modals, you also need to include the references of velocity.min.js and velocity.ui.min.js.

One such CDN based links are shown below:

 <script src=”https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js”></script>

Credit: Mike Sozanski