Controls

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>

.demo-visual { gap: 18px; }
.row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.box {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--highlight-color);
  transform: translateX(0px);
}
.bar-wrap {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  height: 10px;
}
.bar { height: 100%; width: 0%; background: var(--orange); }
.hint { font-size: 12px; color: #888; }
.spacer { height: 80vh; }