📚 web-animation-club — javascript css animation helpers

Travis StatusNPM Version

WAC is a tiny ~0.8kb javascript library with cross-browser methods to handle CSS ontransitionend and onanimationend events — AKA css animation and transition javascript callbacks.

WAC's onceTransitionEnd method demo

Run the animation to see the callback method in action.

Basic Usage

The onceTransitionEnd method is a cross-browser wrapper on the ontransitionend event and will be called once after the end of the transition.

wac.onceTransitionEnd(element).then((event) => {
  // ... do something once the transition has completed

Where to use it

Use it on every web project that requires controled performant 60fps animations. You can check it in production on the react-awesome-button and react-awesome-slider react components and also on my web developer portfolio :)

react-awesome-slider-demoaward winning web portfolioreact-awesome-button-demo

HTML/Javascript implementation

When you load it directly into the page you can access the methods through the wac object.

<script src="https://webanimation.club/library/0.1.2/web-animation-club.min.js"></script>
  var element = document.querySelector('.element');

  wac.onceTransitionEnd(element).then(function(event) {
    // ... do something once animation has completed

Javascript ES6 implementation

Install the web-animation-club package through the NPM Registry via npm install web-animation-club.

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

const element = document.querySelector('.element');

onceTransitionEnd(element).then((event) => {
  // ... do something once animation has completed

React usage on react-transition-group

Avoid using the default setTimeout for handling animations on Transition/CSSTransition. Instead of using the timeout prop, attach onceTransitionEnd listener through the addEndListener prop.

import { onceTransitionEnd } from 'web-animation-club';
import Transition from 'react-transition-group/Transition';

const Fade = ({ in: inProp }) => (
    addEndListener={(node, done) => {
      onceTransitionEnd(node).then(done); 👈🏻 👈🏻 👈🏻
    {(state) => (
      <div style={{
        I'm a fade Transition!

Frame throwing technique - beforeFutureCssLayout

Whenever you need for an css animation or transition to start in a future frame or to skip a couple frames during a timeline coreographed animation. Use WAC's beforeFutureCssLayout to throw the start of the animation N frames into the future.

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

const element = document.querySelector('.element');
const frames = 5; // ideally one frame = ~17ms

beforeFutureCssLayout(frames, () => {
* The method name will be more accurate as soon as the modern browsers agree on when exactly requestAnimationFrame is called.