Ensure Animation
A simple JS module to ensure a CSS animation plays continuously through to the end animation frame.
See the Demo
Use Cases
Continue playing loading animation until a:
- Lazy loaded image is loaded
- User has clicked on a notification
- "Load more" ajax request has been completed
- Chain multiple animations to fire sequentially
Install
npm install ensure-animation --saveUsage
Given the following markup:
<figure>
<img src="large-image.jpg" class="hero lazyload">
<div class="preloader" data-ensure-target=".hero" data-ensure-until=".lazyloaded" data-ensure-finish-class="fade-in"></div>
</figure>Import EnsureAnimation for use in your JS:
import EnsureAnimation from 'ensure-animation'
new EnsureAnimation('.preloader')Get instances
const preloaders = new EnsureAnimation('.preloaders')Stop single instance
const preload = new EnsureAnimation('.preloader')[0]
preload.finish()Restart the animation
preload.restart()Stop all instances
const preloaders = new EnsureAnimation('.preloader')
preloaders.each((preloader) => preloader.finish())Custom Options
Options can be passed directly to an instance using data attributes on the node itself, or by passing in an object of values.
<figure>
<img src="large-image.jpg" class="hero lazyload">
<div data-ensure-target=".hero"
data-ensure-until=".lazyloaded"
data-ensure-finish-class="fade-in"
class="preloader"></div>
</figure>And
const preloaders = new EnsureAnimation('.preloader', {
// target to watch for class to be applied
target : '.hero-image'
// targets' class signaling animation should finish
until : 'has-been-loaded',
// target received this class upon finished animation,
finishClass : 'custom-finished-class'
})