Gradient colors from data attribute

Question

I'm trying to get gradient colors from data-attribute with granim.js plugin; https://sarcadass.github.io/granim.js/examples.html

<canvas id="canvas-basic" class="granim" data-granim-opacity="[1, 1]" data-granim-colors="[ ['#AA076B', '#61045F'],['#02AAB0', '#00CDAC'],['#DA22FF', '#9733EE'] ]"></canvas>

Here is the variations;

$('.granim').each(function(){
        var item = $(this),
        granimOpacity = $(item).data('granim-opacity'),
        granimColors = $(item).data('granim-colors');
        var granimInstance = new Granim({
            element: '.granim',
            name: 'basic-gradient',
            direction: 'left-right',
            opacity: granimOpacity,
            isPausedWhenNotInView: true,
            states : {
                "default-state": {
                    gradients: granimColors
                }
            }
        });
    });

Opacity is works good but gradients colors didn't work.

Demo; https://codepen.io/anon/pen/owqbaK

Answer 1

Use granimColors as an array.

The gradients attribute is expecting an array of arrays.

$('.granim').each(function(){
  var item = $(this),
    granimOpacity = $(item).data('granim-opacity'),
    granimColors = $(item).data('granim-colors');

  var granimInstance = new Granim({
    element: '.granim',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: granimOpacity,
    isPausedWhenNotInView: true,
    states : {
      "default-state": {
        gradients: [granimColors] // Change this
      }
    }
  });
});