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

Category: Animation , Javascript , Recommended | October 2, 2016
Author: christinecha
Views Total: 558 views
Official Page: Go to website
Last Update: October 2, 2016
License: MIT

Preview:

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

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)
})

You Might Be Interested In:


Leave a Reply