Complete configuration

2つの状態、画像、コールバックを設定した場合の全ての設定です。

var granimInstance = new Granim({
  element: '',
  name: 'granim',
  elToSetClassOn: 'body',
  direction: 'diagonal',
  isPausedWhenNotInView: false,
  scrollDebounceThreshold: 300,
  opacity: [1, 1],
  stateTransitionSpeed: 1000,
  image : {
    source: '../assets/img/bg-forest.jpg',
    position: ['center', 'bottom'],
    stretchMode: ['stretch', 'stretch-if-bigger'],
    blendingMode: 'multiply',
  },
  states : {
    "default-state": {
      gradients: [
        ['#834d9b', '#d04ed6'],
        ['#1CD8D2', '#93EDC7']
      ],
      transitionSpeed: 5000,
      loop: true
    },
    "dark-state": {
      gradients: [
        ['#757F9A', '#D7DDE8'],
        ['#5C258D', '#4389A2']
      ],
      transitionSpeed: 5000,
      loop: true
    }
  },
  onStart: function() {
    console.log('Granim: onStart');
  },
  onGradientChange: function(colorDetails) {
    console.log('Granim: onGradientChange, details: ');
    console.log(colorDetails);
  },
  onEnd: function() {
    console.log('Granim: onEnd');
  }
});

グラデーションには2色以上の色を指定することができますが、 状態(state)ごとに異なる色数にすることはできません。^*1 opacityの要素数を調整する必要があります。

var granimInstance = new Granim({
  element: '',
  name: 'granim',
  elToSetClassOn: 'body',
  direction: 'diagonal',
  isPausedWhenNotInView: false,
  scrollDebounceThreshold: 300,
  opacity: [1, 1, .5, 1],
  stateTransitionSpeed: 1000,
  states : {
    "default-state": {
      gradients: [
        ['#834d9b', '#d04ed6', '#1CD8D2', '#93EDC7'],
        ['#1CD8D2', '#93EDC7', '#757F9A', '#4389A2']
      ],
      transitionSpeed: 5000,
      loop: true
    },
    "dark-state": {
      gradients: [
        ['#757F9A', '#D7DDE8', '#1CD8D2', '#93EDC7'],
        ['#5C258D', '#4389A2', '#1CD8D2', '#93EDC7']
      ],
      transitionSpeed: 5000,
      loop: true
    }
  }
});

*1 opacityと、それぞれのstateに定義したstates.gradientsの配列の色数を合わせる必要があります。 上記の例では、opacityの要素数が4で、default-stateとdark-stateでそれぞれ定義しているstates.gradientsの配列の色数も4になっています。