css-animation-sync

Synchronise and control CSS Animations

NOTE: This library was created before the availability of the Web Animations API and this may now provide a better solution for you.

The Problem

When DOM elements styled with the same CCS Animation are added to the document at different times, the animations are out of synchronisation.

Problem	Solution
Elements added at different times are out of sync	Adding sync('spinner');

Interactive Example

Usage

import sync from 'css-animation-sync';

sync('spinner');

Install

npm install css-animation-sync --save

API

• const animation = new sync(animationName || animationNames) - Synchronises all DOM elements using a CSS animation or multiple CSS animations. The animations duration needs to be the same for syncing to make sense.

  • animationName Name of the CSS animation to sync
  • animationNames Array of CSS animations to sync (allows syncing multiple animations)

  Returns an animation instance (see below)

• animation.free() - Stops synchronisation of DOM elements using the animation

• animation.pause() - Pause the animation of DOM elements using the animation

• animation.stop() - Stop the animation of DOM elements using the animation

• animation.start() - Start/Resume the animation of DOM elements using the animation

Test

npm install
npm test

Dev

npm start