React Examples

Practical patterns with the SplitText React component.

Core Split Patterns

Basic Fade In

By default, SplitText splits into chars, words, and lines. This example sets options.type: "words" so you can animate one word at a time.

Character Reveal

Use options.type: "chars" when you need per-character timing.

Emoji Support

When splitting by chars, compound emoji stay intact. Families, flags, and skin-tone modifiers animate as single units.

Line by Line

Use lines to animate measured wrapped lines, so motion follows real layout.

Masked Line Reveal

mask: "lines" wraps each line in a clip container, so vertical y reveals stay clean. This example starts the animation in onSplit, which receives the split elements (here, { lines }).

Nested Elements

Griffo preserves inline HTML elements like <a>, <em>, and <strong> when splitting text. Attributes such as href, class, id, and data-* are retained on the split output.

Lifecycle & Resize

Responsive Split

Enable autoSplit to keep split output aligned with layout reflow. Use onResplit to replay animation when new split elements replace old ones.

Use the Options dropdown to toggle replay on resplit, instant resplit, and line outlines.

Use onSplit with revertOnComplete to automatically restore the original HTML when animation finishes. Return your animation from onSplit; use onRevert for cleanup or side effects after restoration.

Scroll Patterns

Scroll-Triggered

Use onViewportEnter with viewport to trigger animation at a scroll threshold. Set hidden initialStyles first, then add resetOnViewportLeave to reset to initial styles when the element leaves the viewport.

Scroll-Driven

Use Motion's scroll() to tie animation progress to scroll position. Each character's opacity maps to the element's position in the viewport.

Sequential Line Swap on Scroll

createSplitClones duplicates each line and wraps originals + clones in track containers. As scroll progresses, each track shifts down sequentially, swapping the visible line.

Hover

Dynamic Letter Swap

Use createSplitClones to create character tracks so originals can slide out while clones slide in. Start stagger at the hovered character, and gate to one trigger per hover cycle to avoid repeated retriggers.

Variable Font Hover

Animate fontVariationSettings per character for hover states. Use a variable font with a wght axis, and wire hover with either a wrapper (onHoverStart / onHoverEnd) or SplitText mouse events.