.update()

インスタンスが停止中であっても、 インスタンスの更新をトリガーします。

const props = instance.update()

戻り値

object

適用したprops。

デモ

スクロールをして透明度が変化している途中で、 「停止」ボタンを押すと、透明度が固定されますが、 「更新」ボタンを押すと、スクロール位置に応じて、 適切な透明度に更新され、console.logを出力します。
「開始」ボタンを押すと、再度開始されます。

JavaScript

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

document.querySelector('.start').addEventListener('click', function () {
  instance.start();
});
document.querySelector('.stop').addEventListener('click', function () {
  instance.stop();
});
document.querySelector('.update').addEventListener('click', function () {
  const props = instance.update();
  console.log(props);
});

CSS

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

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

HTML

<button class="start">開始</button>
<button class="stop">停止</button>
<button class="update">更新</button>
<div class="element"></div>