ANIMATION > ANIMATABLE PROPERTIES

JS Object Properties

Animate properties of a plain JS object.

JS Object example

JavaScript

HTML

CSS

const $ = xjs; const obj = { score: 0 }; xjs(obj).animate({ score: 1000, update: () => updateUI(Math.round(obj.score)) });

<div class="log">Score: <span id="score">0</span></div>

.demo-visual {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.log {
  font-family: monospace;
  font-size: 20px;
  color: #fff;
}

功能说明：动画普通对象的属性值，并在 update 中把数值渲染到 UI；常用于数值滚动、计数器、进度等非 DOM 属性动画。

Score: 0