Anim-js is a lightweight jQuery plugin for controlling AnimateCSS-based animations applied to DOM elements, on page load, using data-attributes (and it's not viewport-dependent)
Remember WOW.js? Awesome stuff, I use it all the time, but there's this issue I always came across - if the page was refreshed, all animations outside the viewport (to the top, too) wait till you scroll back to them before they fire.
This sometimes is undesirable (for me), so I wrote this little piece to help trigger animations (with the flexibility that data-wow-duration and other WOW data attributes present) on pageload without the added 'in-viewport' constraint.
Hope you find anim-js useful too.
.anim-js {
visibility: hidden
}<img src="/path/to/image" alt="football" class="anim-js bounce" data-ajs-duration="1s" data-ajs-delay="2s" data-ajs-loop="3">In the example above, the 'football' would start bouncing 2 seconds after pageload, bounce three times, with each bounce lasting 1 second
Dependencies
- jQuery
- animate.css
PS: contributions are most welcome