ngGradient is an angularjs library that creates gradient animations with granim.js
https://kimsunwook.github.io/ngGradient
(granim.js: https://github.com/sarcadass/granim.js)
bower install ng-gradient --save
Copy-paste the <script> into your <body>.
<script src=".bower_components/granim/dist/granim.js"></script>
or
<script src=".bower_components/granim/dist/granim.min.js"></script>
<script src=".bower_components/ng-gradient/ngGradient.js"></script>
or
<script src="https://cdn.rawgit.com/KimSunWook/ngGradient/v1.1.3/ngGradient.js"></script>
Make sure you include the module 'ngGradient' in your application config
app.js
angular.module('myApp', [
'ngGradient',
...
]);
ctrl.js
angular.module('app')
.controller('Ctrl', function($scope) {
$scope.onStart = function() {
console.log('start');
};
$scope.onChange = function(colorDetails) {
console.log('change', colorDetails);
};
$scope.onEnd = function() {
console.log('end');
};
});
template.html
<ng-gradient ng-gradient-option="{
opacity: [1, 1],
image : {
source: 'https://source.unsplash.com/1600x900/?white',
blendingMode: 'multiply'
},
states: {
'default-state': {
gradients: [
['#3F51B5', '#9C27B0'],
['#00BCD4', '#03A9F4'],
['#FFEB3B', '#8BC34A'],
['#F44336', '#FF9800']
]
}
}
}" on-start="onStart" on-change="onChange" on-end="onEnd"></ng-gradient>
Easy!