web-animation-club

web-animation-club

Tiny ~0.8kb javascript library with cross-browser methods to handle CSS ontransitionend and onanimationend events. AKA css animation and transition callbacks.

Live Demo

Access the demo at https://webanimation.club

Installation

From the dist file

Just load directly in your HTML the web-animation-club.min.js javascript file located on the dist folder.

... 
<script src="https://webanimation.club/library/0.1.2/web-animation-club.min.js"></script>
...

NPM Registry

From the NPM registry using npm or yarn just install the web-animation-club package.

npm install --save web-animation-club

or

yarn add --save web-animation-club

Basic Usage

For all the following examples please consider the following HTML markup.

<style>
  .animated {
    transition: transform 0.4s linear;
  }
  .move {
    transform: translateX(100px);
  }
</style>
<div class="container">
  <div class="box"></div>
</div>

HTML with ES5

<script src="/path/to/web-animation-club.min.js"></script>
<script>
  var box = document.querySelector('.box');
  
  box.classList.add('animated');
  box.classList.add('move');
  
  onceTransitionEnd(box).then(function(event) {
    // ... do something
  });
</script>

Javascript ES6

  import { onceTransitionEnd } from 'web-animation-club';

  const element = document.querySelector('.box');
  
  // here we're just simulating the addition of a class with some animation/transition
  element.classList.add('animated');
  element.classList.add('move');
  
  // if you are using the transition css property
  onceTransitionEnd(element).then((event) => {
    // ... do something
  });

WAC methods

onceTransitionEnd(element, options)

• element <[HTML element]> html element on which the transition is happening
• options <[object]>
  • tolerance <[integer]> used in case of pseudo-element animations
  • property <[string]> animated property to check before calling the callback

onceAnimationEnd(element, options)

• element <[HTML element]> html element on which the transition is happening
• options <[object]>
  • tolerance <[integer]> used in case of pseudo-element animations
  • property <[string]> animated property to check before calling the callback

beforeFutureCssLayout(frames, callback)

• frames <[integer]> Number of frames to skip
• callback <[function]> function called after the skipped frames

beforeNextCssLayout(callback)

• callback <[function]> function called after the skipped frame

Author

Rafael Caferati

• Checkout my Full-Stack Web Developer Website
• Other open source projects @ Code Laboratory
• A scope of my work @ Web Portfolio

License

MIT. Copyright (c) 2018 Rafael Caferati.