pixi-reels
All recipes

Hold & Win: count-up coin

Each coin's amount ticks up from 0.00 to its value as it settles, in a left-to-right wave, instead of snapping to the number. The count is a plain gsap tween that rewrites the gold-font label every frame.

Loading recipe…

Press Run. A fresh board of coins arrives and each one ticks its amount up from 0.00 to its value, one after another in reading order, then pops to a width-fitted final number. Press again to re-roll.

A count is a tween over a number

There’s nothing reel-specific here — the count is a gsap tween over a { v } object whose onUpdate rewrites the gold-font label:

const counter = { v: 0 };
gsap.to(counter, {
  v: coin.data.value, duration: 0.7, ease: 'power1.out',
  onUpdate: () => { label.text = counter.v.toFixed(2); },
  onComplete: () => { /* settle + pop to the fitted final amount */ },
});

In a real feature you’d start this in your cell:landed / coin:locked handler so each coin counts up as it lands. coinWaves(coins, 'sequence') here drives them one per beat; switch to 'by-row' or 'all' for a different cadence.