Shuffle
Customize Shuffle
Duration0.35s
Shuffle Times1
Stagger0.03s
Threshold0.1
Props
| Property | Type | Default | Description |
|---|---|---|---|
| style | object | {} | Inline styles applied to the wrapper element. |
| shuffleDirection | "left" | "right" | "right" | Direction the per-letter strip slides to reveal the final character. |
| maxDelay | number | 0 | Max random delay per strip when animationMode = "random". |
| 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 | string | "center" | Text alignment applied via inline style. |
| onShuffleComplete | () => void | - | Called after a full run completes (and on each loop repeat). |
| text | string | "" | The text content to shuffle. |
| className | string | "" | Optional CSS class for the wrapper element. |
| duration | number | 0.35 | Duration (s) of the strip slide per letter. |
| ease | string | Function | "power3.out" | GSAP ease for sliding and color tween. |
Dependencies
gsap@gsap/react
Created with ❤️ by Cybershoora