ANIMATION > CALLBACKS

Callbacks

Pass begin, update, and complete to animate(). The update callback receives { target, progress, time }.

Accepts

A Function. For update, the first argument is an object: { target, progress, time }.

Default

noop

INFO
Callbacks are configured per animation via the params object.
xjs('.box').animate({ x: 200, update: ({ progress }) => console.log(progress) });
Callbacks code example
JavaScript
HTML
CSS
const $value = document.querySelector('.value'); let updates = 0; xjs('.circle').animate({ x: '16rem', loop: Infinity, direction: 'alternate', begin: () => $value.textContent = '0', update: ({ progress }) => $value.textContent = Math.round(progress * 100) + '%' });
<div class="value">0</div> <div class="circle"></div> 
.circle {
  width: 50px;
  height: 50px;
  background-color: var(--highlight-color);
  border-radius: 50%;
}
.value {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
  font-family: monospace;
}
.demo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
功能说明：通过 begin/update/complete 回调拿到动画进度与时间，适合做进度条、数字跟随、状态同步等“联动”效果。
0