Character or word-level text animations with slide, blur, and width transitions using CSS or WAAPI.

SlidingText

Animate text entrance and exit at the character or word level with slide effects, blur, and optional width animations.

Import

import { SlidingText } from '@mks2508/mks-ui/react';

Features

Character or word mode - Animate by character or whole words
Direction control - Vertical or horizontal slide
Motion blur - Optional blur during animation
Width animation - Animate container width changes
Staggered timing - Configurable delay between elements
CSS transitions - Uses CSS for smooth, performant animations

Basic Usage

Word Mode

Hello World

.tsx

<SlidingText text="Hello World" mode="word" />

Character Mode

Animate

.tsx

<SlidingText text="Animate" mode="character" />

Animation Direction

Vertical vs Horizontal

Vertical Slide

Horizontal Slide

.tsx

<SlidingText text="Vertical Slide" direction="vertical" />
<SlidingText text="Horizontal Slide" direction="horizontal" />

Controlled Animation

Control animation state with initial, animate, and exit props:

function AnimatedMessage({ show, text }) {
  return (
    <SlidingText
      text={text}
      initial="initial"
      animate={show ? 'animate' : undefined}
      exit={show ? undefined : 'exit'}
      onAnimationComplete={() => console.log('Done')}
    />
  );
}

Width Animation

Animate container width when text changes:

<SlidingText
  text={dynamicText}
  widthAnimation={true}
  mode="word"
/>

Uses CSS interpolate-size: allow-keywords when supported, with fallback to scrollWidth measurement.

Blur Effect

Enable motion blur during animation:

<SlidingText
  text="Blurry Transition"
  blur={true}
  duration={300}
/>

Animation Configuration

<SlidingText
  text="Custom Animation"
  mode="character"
  direction="vertical"
  staggerDelay={20}     // ms between elements
  duration={250}        // ms per element
  easing="cubic-bezier(0.4, 0, 0.2, 1)"
  blur={true}
/>

Usage with Reorder

Combine with Reorder for animated tag lists:

import { Reorder, SlidingText } from '@mks2508/mks-ui/react';

function TagList({ tags }) {
  return (
    <Reorder layout="inline-horizontal">
      {tags.map(tag => (
        <span key={tag.id} data-reorder-id={tag.id}>
          <SlidingText text={tag.label} mode="character" />
        </span>
      ))}
    </Reorder>
  );
}

API Reference

Prop	Type	Default	Description
`text`	`string`	—	Text content to animate
`mode`	`'word' \| 'character' \| 'none'`	`'word'`	Animation granularity
`direction`	`'vertical' \| 'horizontal'`	`'vertical'`	Slide direction
`staggerDelay`	`number`	`15`	Delay between elements (ms)
`duration`	`number`	`200`	Animation duration (ms)
`easing`	`string`	—	CSS easing function
`blur`	`boolean`	`true`	Enable blur effect
`widthAnimation`	`boolean`	`false`	Animate container width
`initial`	`'initial' \| false`	`'initial'`	Initial state
`animate`	`'animate'`	—	Trigger enter animation
`exit`	`'exit'`	—	Trigger exit animation
`onAnimationComplete`	`() => void`	—	Completion callback
`className`	`string`	—	Additional CSS classes
`style`	`CSSProperties`	—	Inline styles

CSS Classes

The component generates elements with these classes:

Class	Description
`.waapi-sliding-text-container`	Outer container
`.waapi-sliding-text-content`	Inner content wrapper
`.waapi-sliding-text-token`	Individual text token
`.waapi-direction-vertical`	Vertical animation mode
`.waapi-direction-horizontal`	Horizontal animation mode

SlidingNumber - Animated numbers
Reorder - List FLIP animations
useListFormat - Locale-aware formatting

SlidingText

On this page