Animate-plus.js

A jQuery plugin that makes the web move!

About

Animate-plus.js is a jQuery plugin that extends animate.css functionality. No javascript coding required!

If you like animate-plus.js please consider buying me a beer!

Documentation

Please see the complete documentation over at GitHub.

Quick Start

  1. Include jQuery and Animate.css
  2. Add "animate-plus" css class to element
  3. Define animations using the "data-animations" attribuite
  4. Specify duration and delay using "data-animation-duration" and "data-animation-delay"
<span
class="animate-plus"
data-animations="bounceIn,fadeOutRight"
data-duration="1s,500ms"
data-delay="0s, 2s"
>
Animated content
</span>

Live Examples

Just one element with multiple animations.

Animate-plus.js
<span class="animate-plus" data-animations="bounceIn,shake,fadeOutRight,fadeIn">Animate-plus.js</span>

One element looping indefinitely.

Animate-plus.js
<span class="animate-plus" data-animations="bounceIn, fadeOutLeft" data-animation-repeat="true">Animate-plus.js</span>

Group of 2 elements, animated in a specified order.

Animate-plus.js Animate-plus.js
<span
class="animate-plus"
data-animation-group="group1"
data-animations="bounceIn, fadeOutLeft"
data-animation-order="1,3"
>
Animate-plus.js
</span>

<span
class="animate-plus"
data-animation-group="group1"
data-animations="tada, fadeOutRight"
data-animation-order="2,3"
>
Animate-plus.js
</span>

Group of 2 elements, animated with specified duration and delay.

Animate-plus.js Animate-plus.js
<span
class="animate-plus"
data-animation-group="group2"
data-animations="bounceIn, fadeOutLeft"
data-animation-duration="3s,5s"
>
Animate-plus.js
</span>

<span
class="animate-plus"
data-animation-group="group2"
data-animations="tada, fadeOutRight"
data-animation-delay="0s,2s"
>
Animate-plus.js
</span>

One element that animates when it's visible on screen (ex. on scroll). The animation resets when the element goes off screen.

Animate-plus.js
<span
class="animate-plus"
data-animations="tada"
data-animation-when-visible="true"
data-animation-reset-offscreen="true"
>
Animate-plus.css
</span>
Last updated on .