https://github.com/sarcadass/granim.js

Create fluid and interactive gradient animations with this small javascript library.
https://github.com/sarcadass/granim.js

animation fluid gradient

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sarcadass/granim.js
• Owner: sarcadass
• License: mit
• Created: 2016-08-30T22:36:48.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T17:56:03.000Z (almost 2 years ago)
• Last Synced: 2024-05-17T13:02:47.881Z (6 months ago)
• Topics: animation, fluid, gradient
• Language: JavaScript
• Homepage: https://sarcadass.github.io/granim.js/
• Size: 1.95 MB
• Stars: 5,246
• Watchers: 96
• Forks: 232
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-gradient - granim.js - Create fluid and interactive gradients animations with this small (< 17 kB) js library. (JavaScript)

README

        
# Granim.js [![Build Status](https://travis-ci.org/sarcadass/granim.js.svg?branch=master)](https://travis-ci.org/sarcadass/granim.js) [![codecov](https://codecov.io/gh/sarcadass/granim.js/branch/master/graph/badge.svg)](https://codecov.io/gh/sarcadass/granim.js) [![gitter](https://badges.gitter.im/sarcadass/granim.png)](https://gitter.im/Granim-js/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link)

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

**See the [demo site](http://sarcadass.github.io/granim.js)**.

## Install

### From NPM

* Run `npm install granim --save`

### From Bower

* Run `bower install granim`

### Static

* Download the latest version [in the release section](https://github.com/sarcadass/granim.js/releases)

## How to use

```html

var granimInstance = new Granim({

   element: '#granim-canvas',

   name: 'granim',

   opacity: [1, 1],

   states : {

       "default-state": {

           gradients: [

               ['#834D9B', '#D04ED6'],

               ['#1CD8D2', '#93EDC7']

           ]

       }

   }

});

```