Vanilla Examples

Practical patterns using splitText in vanilla JavaScript.

Core Split Patterns

Basic Fade In

By default, splitText() uses type: "chars,words,lines" and returns all three arrays. This example uses type: "words" so you can animate one word at a time.

Character Reveal

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

Line by Line

lines returns measured wrapped lines, so the animation follows real layout.

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 }) after splitting.

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

With Auto-Revert

Use onSplit with revertOnComplete: true to automatically restore the original HTML when animation finishes. Return your animation from the callback; Griffo handles extracting the .finished promise.

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.

Scroll Patterns

Scroll-Triggered

Use Motion's inView to trigger animation when the element crosses a viewport threshold. Set hidden initialStyles first, then animate on entry.

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.

Integrations & CSS

With GSAP

Split elements are plain HTMLElement arrays, so they work directly with GSAP tweens. Call result.revert() when the animation completes to restore the original DOM.

CSS-Only Animation

Enable propIndex to expose split indexes as CSS variables for CSS-only staggered animation.