Unfold

Unfold splits text into lines and rotates each line in from a folded 3D state - like origami unfolding. CSS perspective is injected automatically so no extra setup is needed.

unfold is a standalone helper, not a tween property. It returns a Timeline you can play, pause, scrub, and reverse.

---

Top Hinge

The default hinge point is top center - each line drops down from a folded-up position.

First, you fold the paper.
Then, you crease the edges.
Finally, the shape unfolds.

60 FPS

---

Bottom Hinge

Setting transformOrigin: 'bottom center' and rotateX: 90 flips the hinge - lines fold up from below instead.

One line rises.
Then the next.
Then the last.

60 FPS

---

No Fade

Set fade: false to animate only the 3D rotation, keeping text fully opaque throughout.

Solid entrance.
No fade needed.
Just the fold.

60 FPS

---

API

import { unfold } from 'animx/plugins/Text'

const tl = unfold(target, config)
tl.play()

Returns a Timeline. All playback methods (pause, reverse, seek, kill) are available.

Options

Option	Default	Description
transformOrigin	'top center'	The hinge point for the 3D fold. 'bottom center' flips the direction.
rotateX	90	Starting rotateX angle in degrees. Negative values fold from above; positive from below.
fade	true	If true, each line also fades in from opacity: 0.
duration	1	Duration of each line's animation in seconds.
ease	'quart.out'	Easing applied to each line.
stagger	0.1	Delay between each line's start, in seconds.
revertOnComplete	false	Remove split spans and restore the original DOM on completion.
onLineStart(el, i)	-	Callback fired when each line begins animating.

All other standard tween options (repeat, yoyo, onComplete, etc.) are forwarded to the inner tween.

Tip: Unfold automatically injects perspective: 1000px on the parent element if none is set. For custom depth, add perspective to the parent's CSS before calling the function.