Back to rankingsGranim.js
Create fluid and interactive gradient animations with this small javascript library.
fluidgradientanimation
Key Metrics
Star Growth
Stars
5.3k
Forks
224
Weekly Growth
—
Issues
5
3k4k5k
Sep 2016Apr 2018Dec 2019Aug 2021Apr 2023Nov 2024Jul 2026
Artifactsnpm
npm install granim.jsREADME
Granim.js 
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
- 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>
Related repositories