Lines. A character fold is fussy and hard to read.

Can I fold on scroll?

Start when the title enters. Do not scrub a fold against scroll unless you have tested the hinge at every point.

What about reduced motion?

Show the open title. No rotation.

Does this work with variable fonts?

Yes, if you split after the font is ready.

Folding text

Folding text opens a line around an edge, as if the words were on a card, so the heading arrives by turning into place.

TextBuild difficulty: MediumrotationX

Also called Fold up text, 3D line fold, Flip heading, Paper fold type.

Here it is working.

Motion turns in

Letters fold down onto the line. Play again to watch it twice.

For designers

This needs a clear hinge and a short string. A 2 line title can fold. A paragraph folding by sentence is a pop-up book nobody asked to finish. If you cannot picture the edge the type turns around, you wanted Cinematic text or Text reveal. Perspective lives on the parent. Too much depth and the letters shear. Too little and you built a fade with extra maths. Reduced motion shows the finished lines, already open.

Use this when

The title is 1 or 2 lines, and a hinge is part of the idea.
You can finish the fold in under 1 second.
The parent has room for a little perspective without clipping.
Reduced motion can show the lines already open.

Reach for something else when

You want a flat crop or mask. Use Cinematic text or Rectangle text reveal.
The heading should stagger in on a plane. Use Text reveal.
A whole block should arrive, not a line. Use Element reveal or Mask reveal.
Letters should pop or zoom. Use Popping text or Text split zoom.
The copy is body text. Set it in type.

How to build it

Write the title as real text. SplitText can cut the lines after the font has loaded. Put perspective on the wrapper, not on each glyph. Rotate each line from about 80 degrees to 0, around the top or the baseline, and fade only if the underside reads as a flash. Stagger the lines by 80 to 120 milliseconds. Characters folding one by one will look like a broken blind. Keep overflow in mind. On reduced motion, set rotation to 0 and show the title. Rebuild the split if wrapping changes.

Official GSAP

SplitText + rotationX.

gsap.set('.title', { perspective: 500 });
gsap.from(split.chars, { rotationX: -80, autoAlpha: 0, transformOrigin: '50% 0%', stagger: 0.03, duration: 0.7 });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Lines or characters?: Lines. A character fold is fussy and hard to read.
Do I need a 3D card for this?: No. A heading can fold.
Will this look flat on a cheap phone?: It can. Keep the depth small.
Can I fold on scroll?: Start when the title enters. Do not scrub a fold against scroll unless you have tested the hinge at every point.
What about reduced motion?: Show the open title. No rotation.
Does this work with variable fonts?: Yes, if you split after the font is ready.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Rectangle text reveal