Appearance
TextSwap
The TextSwap text effect compares string differences, wraps character positions inside vertical overflow-hidden layouts, and translates mismatched characters vertically to exit old letters and slide in new ones.
Basic Character Swap
The text configuration parameter defines the target string. Mismatched letters slide out while matching characters remain stable.
SWAP MOTION
Snappy Fast Transition
Reducing duration and stagger properties creates a rapid, high-speed character swap sequence.
SLIDING
Elastic Overshoot Easing
Applying a back ease curve (e.g. 'back.out(N)') introduces a bouncy settling effect as incoming characters lock into position.
SPRING TRANSITION
Revert Layout on Completion
Setting revertOnComplete: true collapses all temporary inline positioning <span> containers and restores clean string content to the target DOM element upon transition completion.
ORIGINAL STATE
Interactive Cycle Sequencer
Because TextSwap processes string differences, multiple calls can be sequenced to cycle between a list of strings on click.
DEVELOPMENT
API Reference
javascript
import { textSwap } from 'animx/plugins/Text'
const tl = textSwap(target, config)Configuration Options
| Option | Default | Description |
|---|---|---|
text | Required | The target text content string to transition into. |
duration | 0.6 | Transition duration of each individual character in seconds. |
stagger | 0.04 | Delay offset between subsequent character launches in seconds. |
ease | 'cubic.inOut' | Deceleration easing profile applied to vertical translations. |
revertOnComplete | false | Restores original text layout structures upon timeline completion. |
paused | false | Standard playback initialization lock flag. |