loop

loop

アニメーションをループするかどうかを指定します。

• 初期値 : true
• type : boolean

グラデーションのアニメーションが最後まで到達したら繰り返しますか？

デモ

'no-repeat'ボタンを押すと、ループを止めます。

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ],
    },
    'state-no-repeat': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ],
      loop: false,
    }
  }
});

document.querySelector('.default-state').addEventListener('click', function() {
  granimInstance.changeState('default-state');
});

document.querySelector('.state-no-repeat').addEventListener('click', function() {
  granimInstance.changeState('state-no-repeat');
});

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>
<div class="buttons">
  <div class="button state-no-repeat">no-repeat</div>
  <div class="button default-state">repeat</div>
</div>

CSS

.buttons {
  display: flex;
  justify-content: center;
}

.buttons .button {
  margin: 8px;
  border: 1px solid #000;
  color: #000;
  padding: 8px;
  text-align: center;
  width: 8em;
  transition: all 300ms ease;
}

.buttons .button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  transition: all 300ms ease;
}