Appearance
Flip3D
The Flip3D text effect splits text content into character, word, or line units and rotates them in 3D space along a horizontal or vertical axis, emulating split-flap or modern dimensional displays.
Horizontal 3D Flip (X-Axis)
The default configuration rotates text units around the horizontal X-axis.
SPLIT-FLAP
Vertical 3D Flip (Y-Axis)
Setting axis: 'Y' rotates text units around the vertical Y-axis.
DIMENSIONAL
Word-Level Flapping
Setting the type parameter to 'words' flips whole word tokens instead of individual letters.
FLAP COMPLETE WORDS
Perspective & Transform-Origin Configurations
Reducing the perspective value (e.g. '300px') intensifies the 3D depth distortion. Customizing transformOrigin overrides rotation anchor coordinates.
DISTORTION
Snappy Looping Display
Combining repeat: -1 and yoyo: true structures an infinite split-flap transition cycle.
LOOPING
API Reference
javascript
import { flip3D } from 'animx/plugins/Text'
const tl = flip3D(target, config)Configuration Options
| Option | Default | Description |
|---|---|---|
type | 'chars' | Slicing unit layout: 'chars', 'words', or 'lines'. |
axis | 'X' | Axis of rotation: 'X' or 'Y'. |
rotate | -90 | Starting angular displacement offset in degrees. |
fade | true | Interpolates opacity from 0 to 1 during rotation. |
perspective | '1000px' | CSS perspective depth applied to the layout container. |
transformOrigin | 'top center' | CSS rotation anchor. Defaults to 'top center' for 'X', 'center left' for 'Y'. |
duration | 0.8 | Rotation duration of each individual unit in seconds. |
ease | 'back.out(1.5)' | Deceleration easing profile. |
stagger | 0.05 | Delay offset between subsequent elements in seconds. |
revertOnComplete | false | Resets layout and removes absolute spans on complete. |
paused | false | Standard playback initialization lock flag. |