granim.js

Create fluid and interactive gradient animations with this small javascript library.

5291
233
JavaScript

Granim.js Build Status codecov gitter

Create fluid and interactive gradient animations with this small javascript library.

See the demo site.

Install

From NPM

  • Run npm install granim --save

From Bower

  • Run bower install granim

Static

How to use

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>