Animate-plus.js

About

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

Do multiple animations, on multiple elements
Do animations in order or at the same time
Make elements animate while scrolling
Group elements in independent animation groups

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

Documentation

Please see the complete documentation over at GitHub.

Quick Start

Include jQuery and Animate.css
Add "animate-plus" css class to element
Define animations using the "data-animations" attribuite
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>