.stop()

インスタンスのアニメーションを停止します。 インスタンスの全てのpropsは、 最後の値を保持します。

instance.stop()

デモ

スクロールをして透明度が変化している途中で、 「停止」ボタンを押すと、 押した時点での透明度で固定されます。

JavaScript

const instance = basicScroll.create({
  elem: document.querySelector('.element'),
  from: '0',
  to: '200px',
  props: {
    '--opacity': {
      from: 0,
      to: 1
    }
  }
});
instance.start();

document.querySelector('.stop').addEventListener('click', function () {
  instance.stop();
});

CSS

.element {
  width: 100px;
  height: 100px;
  background-color: #000;

  opacity: var(--opacity);
  will-change: opacity;
}

HTML

<button class="stop">停止</button>
<div class="element"></div>