https://github.com/vigetlabs/ensure-animation

Ensure animation runs until class loaded
https://github.com/vigetlabs/ensure-animation

animation javascript preloader

Last synced: about 1 month ago
JSON representation

Ensure animation runs until class loaded

• Host: GitHub
• URL: https://github.com/vigetlabs/ensure-animation
• Owner: vigetlabs
• Created: 2016-10-20T15:18:44.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-11T23:29:45.000Z (almost 8 years ago)
• Last Synced: 2024-11-14T21:49:18.194Z (about 2 months ago)
• Topics: animation, javascript, preloader
• Language: JavaScript
• Size: 101 KB
• Stars: 76
• Watchers: 14
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ensure Animation

A simple JS module to ensure a CSS animation plays continuously through to the end animation frame.

## [See the Demo](http://code.viget.com/ensure-animation)

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

```bash

npm install ensure-animation --save

```

## Usage

Given the following markup:

```html

  

  


```

Import EnsureAnimation for use in your JS:

```js

import EnsureAnimation from 'ensure-animation'

new EnsureAnimation('.preloader')

```

## Get instances

```js

const preloaders = new EnsureAnimation('.preloaders')

```

## Stop single instance

```js

const preload = new EnsureAnimation('.preloader')[0]

preload.finish()

```

## Restart the animation

```js

preload.restart()

```

## Stop all instances

```js

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.

```html

  

  


```

And

```js

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'

})

```