Skip to content

SlotMachine

The SlotMachine text effect wraps characters in container elements, populates vertical strips of random placeholder characters ending with the target character, and translates them vertically with staggered timing.


Basic Staggered Reel Spin

The reelLength option determines the number of randomized characters loaded in the column. The stagger property offsets column scroll delays.

JACKPOT

60 FPS

Elastic Settling Easing

Adjusting the ease parameter (e.g. 'back.out(N)') configures the terminal overshoot magnitude during settle alignment.

BOUNCE

60 FPS

Word-Level Slot Rolling

Setting the type parameter to 'words' rolls entire word tokens instead of individual characters.

SPIN THE WHEEL

60 FPS

Custom Character Pool Configuration

The charsPool parameter defines the character list from which placeholder elements are randomly sampled.

980521

60 FPS

Timeline & Callback Sequencing

Standard lifecycle properties, such as onComplete, execute custom logic upon slot alignment completion.

WINNER

60 FPS

API Reference

javascript
import { slotMachine } from 'animx/plugins/Text'

const tl = slotMachine(target, config)

Configuration Options

OptionDefaultDescription
type'chars'Slicing layout unit: 'chars', 'words', or 'lines'.
reelLength12Column size limit.
charsPool'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'Characters source sequence pool.
stagger0.05Releases delay gap between columns in seconds.
duration1.2Single column roll duration.
ease'back.out(1.2)'Easing curve applied to vertical scrolling.
revertOnCompletefalseResets layout and removes absolute spans on complete.
pausedfalseStandard playback initialization lock flag.