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>