Helix Layout
Nine views rotate 40° each — a full 360° spiral via a single attribute.
Elements stay in normal document flow. No absolute positioning.
Panel 1 rotateY(40deg)
What is Helix?
The helix layout applies a cumulative CSS rotation to each view without touching its position in the document. Scroll drives the camera through the spiral naturally — no JavaScript needed beyond a single attribute.
<div class="foldpage" data-foldpage-view-layout="helix" data-foldpage-view-layout-rotation="40"> <header data-foldpage-view="0">Head — 0°</header> <section data-foldpage-view>Panel 1 — 40°</section> <section data-foldpage-view>Panel 2 — 80°</section> /* … up to 360° */ </div>
rotateY(40deg).
Panel 2 rotateY(80deg)
Additive Steps
The rotation value is per step, not absolute. Each panel receives the previous panel's rotation plus one increment. The head view always stays at 0° — it is never transformed by the layout.
rotation="40": head = 0°, panel 1 = 40°, panel 2 = 80°,
panel N = N × 40°.
Panel 3 rotateY(120deg)
Normal Document Flow
Unlike ring and grid layouts, helix does not apply
position:absolute. Panels stay in their natural vertical order in
the page. Scroll height is determined entirely by your content — no spacer
element is injected.
Panel 4 rotateY(160deg)
Per-Axis Rotation
Use axis-specific attributes to rotate on X, Y, or Z independently. Multiple axes can be combined for compound spiral trajectories.
/* Pure Y rotation (yaw spiral) */ data-foldpage-view-layout-rotation-y="40" /* Pure X rotation (pitch dive) */ data-foldpage-view-layout-rotation-x="20" /* Combined Y + Z (barrel roll + yaw) */ data-foldpage-view-layout-rotation-y="30" data-foldpage-view-layout-rotation-z="10"
rotation-y is set it overrides rotation
for the Y axis only. The other axes remain independent.
Panel 5 rotateY(200deg)
Additive Offsets
The offset-x, offset-y, and offset-z
attributes translate each panel by an additional amount per step — turning the
rotation spiral into a true 3D helix with positional depth.
/* Helix: rotate + push deeper per step */ data-foldpage-view-layout-rotation="40" data-foldpage-view-layout-offset-z="-200" /* Staircase: rotate + drop down per step */ data-foldpage-view-layout-rotation="30" data-foldpage-view-layout-offset-y="80"
N × offset on each axis.
Panel 6 rotateY(240deg)
Live Updates
Helix transforms can be changed at runtime with Fold.set():
/* Increase spiral speed */ Fold.set({ viewLayout: { rotation: 60 } }); /* Add Z depth per step */ Fold.set({ viewLayout: { offsetZ: -300 } }); /* Switch to pitch dive */ Fold.set({ viewLayout: { rotationX: 25, rotation: 0 } });
Fold.set({ viewLayout }) patches in-place — existing
absolute positions are not changed, only transforms are recomputed.
Panel 7 rotateY(280deg)
Comparison: Helix vs Ring
Both helix and ring place views around a center, but they differ in how they interact with the DOM:
| Ring | Helix | |
|---|---|---|
| Positioning | absolute | normal flow |
| Scroll height | scroll spacer | content height |
| Rotation | circular slots | additive per step |
| Z depth | radius (uniform) | offset-z per step |
Panel 8 rotateY(320deg)
Combining with View Dim
Helix works seamlessly with data-foldpage-view-dim to fade
non-active views:
<div class="foldpage" data-foldpage-view-layout="helix" data-foldpage-view-layout-rotation="40" data-foldpage-view-dim="0.3"> ... </div>
data-foldpage-view-dim on the layout container to scope
dimming to the helix group. Non-active views fade to 30% opacity.
Panel 9 rotateY(360deg)
Full Circle
Panel 9 of 9. The cumulative rotation reaches exactly 360° — back to the same facing as the head view. The spiral is complete.
/* 9 panels × 40° = 360° */ data-foldpage-view-layout="helix" data-foldpage-view-layout-rotation="40" /* Change total arc: 6 panels × 60° = 360° */ data-foldpage-view-layout-rotation="60" /* 180° half-turn: 6 panels × 30° */ data-foldpage-view-layout-rotation="30"