Shuffle

Animated text reveal where characters shuffle before settling.

Default

Every prop is wired to the controls underneath. Any change replays the animation, and the refresh button replays it on demand. Hover the text to shuffle it again.

UI LIBRARY

Customize

Direction

Ease

Duration0.35s

Shuffle Times1

Stagger0.03s

Hover ReplayLoop

Loop Delay0s

API Reference

Shuffle

Prop	Type	Default	Description
`text`	`string`	`""`	The text content to shuffle.
`shuffleDirection`	`"left" \| "right" \| "up" \| "down"`	`"right"`	Direction the per-letter strip slides to reveal the final character.
`duration`	`number`	`0.35`	Duration (s) of the strip slide per letter.
`maxDelay`	`number`	`0`	Max random delay per strip when animationMode is "random".
`ease`	`string \| Function`	`"power3.out"`	GSAP ease for sliding and color tween.
`threshold`	`number`	`0.1`	Portion of the element that must enter view before starting.
`rootMargin`	`string`	`"-100px"`	ScrollTrigger start offset (px, %, etc.).
`tag`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span"`	`"p"`	HTML tag to render for the text container.
`textAlign`	`CSS text-align`	`"center"`	Text alignment applied via inline style.
`shuffleTimes`	`number`	`1`	How many interim scrambled glyphs to scroll past before the final char.
`animationMode`	`"evenodd" \| "random"`	`"evenodd"`	Odd/even staggered strips or random per-strip delays.
`loop`	`boolean`	`false`	Repeat the shuffle indefinitely.
`loopDelay`	`number`	`0`	Delay (s) between loop repeats.
`stagger`	`number`	`0.03`	Stagger (s) for strips in "evenodd" mode.
`scrambleCharset`	`string`	`""`	Characters to use for interim scrambles; empty keeps original copies.
`colorFrom`	`string`	`undefined`	Optional starting text color while shuffling.
`colorTo`	`string`	`undefined`	Optional final text color to tween to.
`triggerOnce`	`boolean`	`true`	Auto-run only on first scroll into view.
`respectReducedMotion`	`boolean`	`true`	Skip animation if user prefers reduced motion.
`triggerOnHover`	`boolean`	`true`	Allow re-playing the animation on hover after it completes.

Shuffle events

Prop	Type	Default	Description
`shuffle-complete`	`() => void`	-	Emitted after a full run completes (and on each loop repeat).

Accessibility

Keyboard shortcuts and ARIA behavior.

GSAP SplitText adds aria-label to the element and hides the split pieces from assistive tech, so the text is read once.
With prefers-reduced-motion the text is shown as is, with no shuffle.

Shiny Text Split Flap Text