Motion Examples

Practical patterns using the Motion-powered API in fetta/motion. SplitText accepts Motion props like initial, animate, variants, and whileHover — applied per split element.

Core Variants

Inline Fade-In

Set initial and animate directly on SplitText to define start and end states. Each split element transitions independently with staggered delay.

Nested Elements

Fetta 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.

Revert on Complete

Use revertOnComplete to restore the original unsplit DOM after animation completes. Use onRevert for teardown or follow-up side effects.

Responsive Split

This text reflows naturally at any width, with lines recalculated on resize. Set animateOnResplit={true} to replay the enter animation on each resplit.

onResplit still fires on every full resplit so you can re-run custom animation logic or side effects if needed.

Use the toggle button to switch animateOnResplit on or off.

Local/Global Stagger

delayScope controls how stagger indexes are calculated. Use global for one continuous index, or local to restart per parent group.

Global Index Loop

globalIndex and globalCount let each character compute timing from its absolute position in the full split set. This pattern is useful for looped or wave-like timing across all characters.

Per-Type (Static)

Define separate lines and chars variants to animate lines and characters independently.

Per-Type (Dynamic)

Function variants receive context like lineIndex, so you can compute timing per element. This example offsets character timing per line.

Per-Type delayScope

With delayScope="local", stagger restarts inside each line. Line masks keep the reveal clean while characters move.

CSS Variable Tween

Animate CSS variables (like --hue) and let CSS consume them. This keeps style math in CSS while Motion drives the value.

Interaction Triggers

Interaction variants temporarily override the base animate state.

Hover Weight Shift

whileHover switches to a hover variant while the pointer is over the element. On pointer leave, it returns to the base animate state.

Tap Press Feedback

whileTap applies a variant only while the element is pressed.

Focus State

whileFocus applies a focus variant for keyboard users. It uses the same variant model as hover and tap.

Viewport and Presence

AnimatePresence

SplitText works as a direct child of AnimatePresence. Define exit to animate elements out before they unmount.

Scroll-Triggered

Use whileInView with viewport for threshold-based entry animation. Add resetOnViewportLeave to reset to initial styles when the element leaves the viewport.

Scroll-Driven

whileScroll ties animation progress to scroll position. Each character's opacity maps to the element's position in the viewport.