JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

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

    • 🔾63%Overall
    • 5,236
    • 27.6 days
    • 🕩232
    • 👥9

    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>
    
    Show All