Appearance
Scatter
The Scatter text effect distributes text character or word units across randomized 2D coordinate offsets, rotation angles, and scales, then animates them smoothly back to assemble the target string.
Character Dispersion and Assembly
The spreadX and spreadY parameters define the maximum pixel range boundaries for horizontal and vertical offsets.
DISPERSED
Word-Level Assembly
Slicing at the word-level distributes full text tokens instead of individual letters.
Assembling these fragments together.
Extreme Dispersion Blast
Increasing offsets and utilizing a wide random stagger timeline creates a highly dispersed explosion effect.
Elastic Assembly Easing
Applying an elastic ease profile (e.g. 'elastic.out') drives a bouncing spring return during assembly coordinate snap.
SPRING ASSEMBLY
Looping Timeline Assembly
The returned timeline can be chained within infinite repeating sequences with customized yoyo properties.
LOOP SEQUENCER
API Reference
javascript
import { scatter } from 'animx/plugins/Text'
const tl = scatter(target, config)Configuration Options
| Option | Default | Description |
|---|---|---|
type | 'chars' | Slicing unit layout: 'chars', 'words', or 'lines'. |
spreadX | 250 | Maximum horizontal scatter distance in pixels. |
spreadY | 250 | Maximum vertical scatter distance in pixels. |
rotation | 180 | Maximum rotation angle offset in degrees. |
scale | 0.5 | Starting scale multiplier of scattered elements. |
duration | 1.2 | Slide timeline assembly duration in seconds. |
ease | 'quart.out' | Deceleration easing profile. |
stagger | { amount: 0.6, from: 'random' } | Stagger offset config object or value. |
revertOnComplete | false | Resets layout and removes absolute spans on complete. |
paused | false | Standard playback initialization lock flag. |