Skip to content
Ensure animation runs until class loaded
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.babelrc
.gitignore
.npmignore
README.md
package.json
webpack.config.js
yarn.lock

README.md

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

Usage

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'
})
You can’t perform that action at this time.