Nonsense Parser Microframework

    ensure-animation

    1.0.0 • Public • Published

    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'
    })

    Install

    npm i ensure-animation

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • tommymarshall