Design Atlas
한국어
↝ Motion

Paper fold

페이퍼 폴드

A surface folding and unfolding like a fan or an accordion. Where page curl rolls up a single corner, paper fold divides the whole surface into segments that hinge like joints.

Also known as: Accordion foldFan foldOrigami fold
···
html
<div class="foldwrap"><div class="strip" id="strip"></div></div>
css
.foldwrap{perspective:700px;width:70%;height:62%}
.strip{display:flex;width:100%;height:100%;transform-style:preserve-3d}
.seg{flex:1;transform-origin:left center;display:flex;align-items:center;justify-content:center;
  font:700 20px/1 sans-serif;color:#fff;animation:fold 3.4s ease-in-out infinite}
.seg:nth-child(1){background:var(--accent)}
.seg:nth-child(2){background:var(--accent-2);animation-name:foldRev}
.seg:nth-child(3){background:var(--accent-3)}
.seg:nth-child(4){background:var(--accent);animation-name:foldRev}
@keyframes fold{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(-130deg)}}
@keyframes foldRev{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(130deg)}}
js
const strip = document.getElementById('strip');
for (let i = 0; i < 4; i++) {
  const s = document.createElement('div');
  s.className = 'seg';
  s.style.animationDelay = (i * 40) + 'ms';
  strip.appendChild(s);
}

Split the surface into N vertical segments, set each segment's transform-origin to its left (or right) edge, and rotate it with rotateY. For the fold to zigzag naturally — peak, valley, peak, valley — alternate segments must rotate in opposite directions: if one folds to −140°, the next must fold to +140°, so they stack like an accordion instead of overlapping flat.

Give the parent a perspective and keep transform-style: preserve-3d on each segment so the rotation reads as dimensional rather than collapsing flat. A more faithful version (map folds, folding report cards) nests each segment's DOM inside the previous one so rotation compounds and even the folded thickness shows — but for a simple transition effect, segments placed side by side is enough.

Give each segment a short stagger (30–60ms) so the unfold time scales with segment count — it reads as sweeping open rather than popping flat all at once.

When to use

Use it where the physical act of folding and unfolding fits the content — maps, infographics, menus. An ordinary accordion component (an expanding list) doesn't need a full 3D fold.