granim

Granim.js

Create fluid and interactive gradients animations with this small (< 17 kB) js library.

See the demo site.

Install

From NPM

• Run npm install granim --save

From Bower

• Run bower install granim

Static

• Download the latest version in the release section

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>

Changelog

v2.0.0

Features

• Add custom direction (rhanb)
• Add support for other color types: rgb, rgba, hsl, hsla
• Add custom color positions
• Remove opacity property, use rgba or hsla alpha color channel if you want to use opacity in the colors

Improvements

• Add image.strecthMode property 'none' to allow strecthMode on only one axis
• Add ESLint for better code consistency
• Add tests and doc updates for all the new feature

Miscellaneous

• Update local server config to latest Hapi version
• Add multiple API versions page