Controls

animate() returns a thenable controls object. You can play/pause, seek() (0..1), and wire it to scroll().

Controls example

JavaScript

HTML

const ctl = xjs('.ex-box').animate({
  x: 220,
  rotate: 180,
  opacity: 0.6,
  duration: 800,
  autoplay: false
});

// chainable controls
ctl.seek(0.25).play();

// still awaitable / thenable
ctl.then(() => console.log('done'));

// scroll-linked (works with WAAPI + JS fallback)
const progress = xjs('.ex-bar').animate({
  width: ['0%', '100%'],
  autoplay: false,
  duration: 1000
});
xjs.scroll(progress);

<div class="ex-box"></div>
<div class="bar-wrap">
  <div class="ex-bar"></div>
</div>

Click REPLAY, then scroll inside this panel.

Scroll target area (spacer)