Sweep.js - Smoother color transitions

Download   Demo

Sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces. Ordinary CSS transitions or existing frameworks like Velocity.js convert HSL colors to RGB beforetransitioning. sweep.js addresses this by letting you transition through the color spectrum.

1. INCLUDE JS FILES

<script src="path/to/sweep.js"></script>

2. HTML

<div id="ex1" class="example"><p>Click</p></div>

3. JAVASCRIPT

//click
var ex1 = document.querySelector('#ex1');
ex1.addEventListener('click', function() 
 sweep(ex1, 'backgroundColor', '#a8f', '#a8f', direction: -1, duration: 2000);
, false);

4. OPTIONS

Using sweep.js to transition an element’s color is easy. Whenever you want to trigger an HSL sweep, call:

sweep(target, properties, fromColor, toColor[, options])

• target : element that you wish to animate


• properties : CSS properties that you wish to animate (string or array of strings)


• fromColor : initial color before the transition


• toColor : final color after the transition


• options (optional) : an object that can set the following:
  
  • callback : function to be called once the animation finishes
  
  
  • direction : clockwise (1) or counterclockwise (-1)
  
  
  • duration : time (in ms) to complete the animation
  
  
  • space : ‘HSL’, ‘HUSL’, or ‘RGB’
  
  

Sweep.js - Smoother color transitions