Appearance
SineWave
The SineWave text effect translates text units vertically using staggered sinusoidal offsets, generating wave-like oscillations or wiggling motions.
Basic Character Wave
The amplitude option determines the vertical translation range in pixels. Phase-shifting is controlled by staggering unit delays.
PROPAGATING WAVE MOTION
Word-Level oscillation
Setting the slicing unit to 'words' translates complete word blocks vertically.
Floating words in space.
High-Frequency Oscillation
Increasing amplitude and reducing the oscillation cycle duration generates a tall, rapid vertical flutter.
RAPID_OSCILLATION
Wide Wavelength Configuration
Increasing the stagger offset delays subsequent characters further, stretching out wave peak distances.
STRETCHED WAVE
Composite Diagonal Swapping
Additional horizontal translation parameters can be composed on the underlying character spans using the returned timeline sequence.
COMPOSITE SWAY
API Reference
javascript
import { sineWave } from 'animx/plugins/Text'
const tl = sineWave(target, config)Configuration Options
| Option | Default | Description |
|---|---|---|
type | 'chars' | Slicing layout unit: 'chars', 'words', or 'lines'. |
amplitude | 10 | Vertical oscillation offset limit in pixels. |
duration | 1.0 | Time in seconds to complete one vertical sinusoidal cycle. |
ease | 'sine.inOut' | Sinusoidal loop interpolation easing. |
stagger | 0.05 | Phase shift delay between subsequent text units in seconds. |
repeat | -1 | Loop iterations count. Default is -1 (infinite looping). |
yoyo | true | Reverse translation direction at the end of each cycle. |
revertOnComplete | false | Resets layout and removes absolute spans on complete. |
paused | false | Standard playback initialization lock flag. |