Bars that grow in
Bars grow from the left one after another, the top one first, while the number beside each bar counts up.
Each bar's growth is interpolate(local, [start, end], [0, 1], { ease }), 0 before start and 1 after end.
-
Bars that grow in
Rows of data grow in as bars, one after another, and each value counts up with format() as its bar grows.
<div id="stage" data-composition-id="bars" data-start="0" data-duration="4" data-width="1280" data-height="720" data-fps="30">
<div class="layer" data-component="bars" data-start="0" data-duration="4">
<div data-list="bars" data-key="id">
<template>
<div style="display: flex; align-items: center; height: 56px">
<span style="width: 120px" data-bind="name"></span>
<div style="height: 36px" data-bind-style="bar"></div>
<b data-bind="shown"></b>
</div>
</template>
</div>
</div>
</div>const { scene, interpolate, format } = wildflower.kinetic;
const PLOT = 600; // px, the longest bar
const ROWS = [
{ id: 'atlas', name: 'Atlas', color: '#9d7bff', value: 5800000 },
{ id: 'birch', name: 'Birch', color: '#5fa6a6', value: 4200000 },
{ id: 'cedar', name: 'Cedar', color: '#e8b416', value: 3100000 },
];
scene('bars', {
computed: {
bars() {
const max = Math.max(...ROWS.map((r) => r.value));
return ROWS.map((row, slot) => {
const grown = interpolate(this.local, [0.4 + slot * 0.12, 1.6 + slot * 0.12], [0, 1], { ease: 'power3.out' });
return {
id: row.id,
name: row.name,
bar: { width: (PLOT * row.value / max * grown).toFixed(2) + 'px', background: row.color },
shown: format(row.value * grown, { notation: 'compact', maximumFractionDigits: 1 }),
};
});
},
},
});html, body { margin: 0; background: #0a0b10; }
#stage { position: relative; overflow: hidden; background: #0b0f1a; color: #fff; font: 24px system-ui, sans-serif; }
.layer { position: absolute; inset: 0; }
[data-component="bars"] { padding: 270px 0 0 160px; }
b { margin-left: 14px; }
[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }Each bar starts slot * 0.12 seconds after the first, so the bars grow in top first when the rows are listed largest first.
A width is a string with its unit.
format() writes the number beside the bar, the value times the same growth, in en-US unless locale is passed, so the text reads the same on every render machine.
The chart at the top of the page spaces its bars with stagger() in place of the hand-written offset.
The Sales Chart demo grows its bars in this way before the race starts.