Ensure animation runs until class loaded
JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


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


npm install ensure-animation --save


Given the following markup:

  <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>

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]

Restart the animation


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.

  <img src="large-image.jpg" class="hero lazyload">
  <div data-ensure-target=".hero"


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'