JavaScript Library To Handle Event-driven CSS Animations – Choreographer.js

Preview:

Description:

Choreographer.js is a very small (~2kb) JavaScript library for handling complex CSS animations which can be bound to any events.

Basic usage:

Import the main JavaScript Choreographer.js into the webpage.

<script src="choreographer.min.js"></script>

The Choreographer is constructed with a config object with the following keys and values:

• customFunctions: Keys are function names, values are animation functions.
• animations: An array of Animation class config objects.

var choreographer = new Choreographer({
    animations: [
      { range: [-1, window.innerWidth], selector: '#box', type: 'scale', style: 'height', from: 100, to: 50, unit: 'vh' },
      { range: [-1, window.innerWidth / 2], selector: '#box', type: 'scale', style: 'opacity', from: 0.2, to: 1 },
      { range: [window.innerWidth / 2, window.innerWidth], selector: '#box', type: 'change', style: 'backgroundColor', to: '#00c9ff' },
    ]
})

Attach an event to the animations.

window.addEventListener('mousemove', function(e) {
  choreographer.runAnimationsAt(e.clientX)
})